一、必備基礎知識
1.置換元素
我們知道html元素可以分爲行內元素和塊級元素。在行內元素中，有一些特殊的元素img、input、select、textarea、button、label，它們擁有內在的尺寸，可以設置寬和高，這類元素稱作 置換元素
<span style="width:50px;height:50px;border:1px solid gray">Hello</span>在body裏面寫上一段代碼，我們在瀏覽器查看。可以發現並沒有什麼效果。因爲span元素沒有內在的尺寸，我們可以把span元素變成塊級元素。下面我們先認識display屬性(元素的顯示方式)
- display:none 可以是把元素隱藏起來，不可見
- display:block 塊級元素
- display:inline 行內元素
- display:inline-block 行內元素，同時繼承了塊級元素的一些屬性（比如擁有內在尺寸）
這裏只介紹幾個display元素常用的值。給span元素添加display屬性就可以看到有效果了
<span style="width:50px;height:50px;display:inline-block;border:1px solid gray">Hello</span>2.setInterval()函數和clearInterval()函數
如果我們想過多少時間去做某件事情，就可以用到setInterval()函數了。這個函數有兩個參數，第一個參數是要執行的事情，第二個參數是時間間隔。clearInterval()函數可以清除定時器函數，有一個參數，該參數是定時器函數的名。在html頁面添加一個button,點擊時控制檯將不會輸出。
ctrl+shift+i或f12 可以開啓開發人員工具調試網頁，看到控制檯的輸出
var sayHello=setInterval(function(){
for(i=0;i<10;i++){
console.log(i);
}
},1000)
$("#stop").click(function(){
clearInterval(sayHello);
})3.取模和取餘數
10/3表示爲10除以3
10%3表示對10除以3取餘數
parseInt(expression):對錶達式取模，保留整數部分
關於時間的函數這裏就不介紹了，可以看日期控件
二、小試牛刀
思路：雙十一的時間2016年11月11日00：00減去當前的時間，得到相差的時間戳，然後對這個時間戳進行細節處理。
效果圖：
css代碼：
<style type="text/css">
#date,#month,#hours,#minutes,#seconds,#rDay,#rHours,#rMinutes,#rSeconds
{
width:60px;
border:1px solid gray;color:black;
display: inline-block;
text-align:center;
}
.margin_right{margin-right:-15px;}
.box1{
width:516px;
height:35px;
font-size:30px;
}
</style>html代碼：
<body>
<h2> 當前時間：</h2><div class='box1'>
<span id='month' ></span><span class="margin_right">月</span>
<span id='date' ></span><span >日</span>
<span id='hours'></span><span class="margin_right">:</span>
<span id='minutes' ></span><span class="margin_right">:</span>
<span id='seconds' ></span>
</div>
<h2>距離雙十一還有:</h2><div class="box1">
<span id="rDay"></span><span class="margin_right">天</span>
<span id='rHours'></span><span class="margin_right">時</span>
<span id='rMinutes'></span><span class="margin_right">分</span>
<span id='rSeconds'></span>
</div>
</body>script代碼：
<script type="text/javascript" src='../JQUERY/js/jquery-2.2.1.js'></script>
<script type="text/javascript">
$(function(){
var today=new Date();
$("#month").text(today.getMonth()+1);
$("#date").text(today.getDate());
var formate=function (type){
if(type<10){
type='0'+type;
return type;
}else{
return type;
}
}
var time=setInterval(function(){
now=new Date();
hours=now.getHours();
minutes=now.getMinutes();
seconds=now.getSeconds();
// if(seconds<10){
// seconds='0'+seconds;
// }
// if(minutes<10){
// minutes='0'+minutes;
// }
// if(hours<10){
// hours='0'+hours;
// }
seconds=formate(seconds);
minutes=formate(minutes);
hours=formate(hours);
$("#hours").text(hours);
$("#minutes").text(minutes);
$("#seconds").text(seconds);
},1000);
var remianTime=setInterval(function(){
var now=new Date();
var discountDay=new Date('2016-11-11 00:00');
var discountDaySeconds=Date.parse(discountDay);
var todaySeconds=Date.parse(now);
var totalRemainSeconds=discountDaySeconds-todaySeconds; //剩下的
var remainDay=parseInt(totalRemainSeconds/(24*60*60*1000)); //parseInt保留整數部分
var dayRemainer=totalRemainSeconds%(24*60*60*1000)
var remainHours=parseInt(dayRemainer/(60*60*1000));
var hoursRemainer=dayRemainer%(60*60*1000);
var remianMinutes=parseInt(hoursRemainer/(60*1000));
var minutesRemainer=hoursRemainer%(60*1000);
var remainSeconds=parseInt(minutesRemainer/1000);
remainDay=formate(remainDay);
remainHours=formate(remainHours);
remianMinutes=formate(remianMinutes);
remainSeconds=formate(remainSeconds);
$("#rDay").text(remainDay);
$("#rHours").text(remainHours);
$("#rMinutes").text(remianMinutes);
$("#rSeconds").text(remainSeconds);
},1000);
})
</script>分析
1）頁面部分可以分爲兩塊，一個是當前的時間，一個距離雙十一的時間。對應的javascript部分也分爲兩個部分。其實就是倆個定時器，因爲這裏每一秒都要顯示時間。
2）第一個定時器部分，就是利用getMonth()等方法獲取當前時間的月日和時分秒等，並把取得的值用$(selector).text()傳給頁面。
3）全局函數formate()的功能是當時、分、秒爲個位數時，自動給補一個零。如果有多次實現相同功能時，我們可以嘗試封裝函數。
var formate=function (type){
if(type<10){
type='0'+type;
return type;
}else{
return type;
}
}4）第二個定時器部分，首先得到當前時間和雙十一相差的時間戳，一天等於24*60*60*1000毫秒，利用parseInt()獲取剩餘天數。對相差的時間戳進行取餘操作得到除了天數之外剩餘的時間，然後是對“時”的處理，一小時等於60*60*1000毫秒，利用parseInt() 對天數剩下的時間戳進行處理，獲得剩餘時數。 分、秒也是相同的一級一級往下的操作。
var now=new Date();
var discountDay=new Date('2016-11-11 00:00');
var discountDaySeconds=Date.parse(discountDay);
var todaySeconds=Date.parse(now);
var totalRemainSeconds=discountDaySeconds-todaySeconds; //剩下的
var remainDay=parseInt(totalRemainSeconds/(24*60*60*1000)); 有誤之處歡迎指正，謝謝！！！