javascript特效實現(4)——當前時間和倒計時效果

時間 2019-11-12

標籤 javascript 特效實現當前時間倒計時效果欄目 JavaScript 简体版

原文原文鏈接

這個效果的實現關鍵是對Date對象和setTimeout的使用。javascript

一共有三個例子，HTML結構以下，就不添加CSS樣式了。html

<body>
    當前時間：<p id="p1"></p>
    高考倒計時：<p id="p2"></p>
    限時搶購：<p id="p3"></p>
</body>

主要體會javascript的實現java

window.onload=function () {  
    var p1=document.getElementById("p1"),
        p2=document.getElementById("p2");
        p3=document.getElementById("p3");
    showtime1();
    showtime2();
    showtime3();
}

1.簡單的實現當前時間的顯示web

 function showtime1() {
     var nowdate=new Date();//建立Date對象nowdate,以獲取當前時間
     var year=nowdate.getFullYear(),//獲取年份
         month=nowdate.getMonth()+1,//獲取月份，getMonth()獲得的是0-11，須要加1
         date=nowdate.getDate(),//獲取日份
         day=nowdate.getDay(),//獲取一週中的某一天，getDay()獲得的是0-6
         week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
         h=nowdate.getHours(),
         m=nowdate.getMinutes(),
         s=nowdate.getSeconds(),
         h=checkTime(h),//函數checkTime用於格式化時，分，秒
         m=checkTime(m),
         s=checkTime(s);
     p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
     setTimeout(showtime1, 1000);//反覆執行函數自己
 }

其中的checkTime函數以下：函數

function checkTime(i) {
   if (i<10) {
      i="0"+i;
   }
   return i;
}

由於平時看到的時間格式通常是00:00:01,而getHours，getMinutes，getSeconds獲得格式是0到9，不是00到09這樣的格式。因此在從9變成10的過程當中，有一位數，變成兩位數，一樣在充59秒變爲0秒或者59分變爲0分或者23時變爲0時。spa

好比 23:59:59 再下一秒應該變爲00:00:00；若未使用checkTime函數進行處理，則會變爲0:0:0，這樣格式上就有點不統一，並且視覺上也有字數增長或減小的突變。(後面兩個例子就不用checkTime函數對時分秒進行處理了！！！)code

2.高考倒計時效果實現htm

function showTime2() {
　　var nowtime=new Date(),//獲取當前時間
　　    endtime=new Date("2017/6/6");//定義結束時間
   var lefttime=endtime.getTime()-nowtime.getTime(),//距離結束時間的毫秒數
       leftd=Math.floor(lefttime/(1000*60*60*24)),//計算天數
       lefth=Math.floor(lefttime/(1000*60*60)%24),//計算小時數
       leftm=Math.floor(lefttime/(1000*60)%60),//計算分鐘數
       lefts=Math.floor(lefttime/1000%60);//計算秒數
   p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
   setTimeout(showTime2, 1000);    
}

其中比較重要的幾點：對象

① 定義結束的時間endtime=new Date("2017/6/6")是經過new一個帶有參數的Date對象，直接 new Date()則是直接獲取到當前的時間；blog

② getTime()方法獲得的是距離1970 年 1 月 1 日的毫秒數。

③天數，小時數，分鐘數和秒數的計算，%（取模運算）。獲得距離結束時間的毫秒數（剩餘毫秒數），除以1000獲得剩餘秒數，再除以60獲得剩餘分鐘數，再除以60獲得剩餘小時數。除以24獲得剩餘天數。剩餘秒數 lefttime/1000 模60獲得秒數，剩餘分鐘數 lefttime/(1000*60) 模60獲得分鐘數，剩餘小時數模 lefttime/(1000*60*60) 模24獲得小時數。

3.限時搶購倒計時效果

function showtime3() {
　　var nowtime=new Date(),
　　　　endtime=new Date("2020/1/1,00:00:00"),//設置結束時間
　　　　lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
　　　　d=Math.floor(lefttime/(60*60*24)),
　　　　h=Math.floor(lefttime/(60*60)%24),
　　　　m=Math.floor(lefttime/60%60),
　　　　s=Math.floor(lefttime%60);
　　p3.innerHTML=d+"天"+h+"小時"+m+"分"+s+"秒";
　　setTimeout(showtime3, 1000);    
}

其實和第二個例子大同小異，區別是結束時間的設置 new Date("2020/1/1,00:00:00")

下面是完整的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒計時效果</title>
    <script type="text/javascript">
        function checkTime(i) {
            if (i<10) { i="0"+i; } return i; } window.onload=function () { var p1=document.getElementById("p1"), p2=document.getElementById("p2"); showtime1(); showtime2(); showtime3();
　　　　 } function showtime1() { var nowdate=new Date(); var year=nowdate.getFullYear(),//年份 month=nowdate.getMonth()+1,//月份 date=nowdate.getDate(),//日 week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"], day=nowdate.getDay(),//getDay獲取0-6 h=nowdate.getHours(), h=checkTime(h), m=nowdate.getMinutes(), m=checkTime(m), s=nowdate.getSeconds(), s=checkTime(s); p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s; setTimeout(showtime1, 1000); } function showtime2() { var nowtime=new Date(), endtime=new Date("2017/6/6"); var lefttime=endtime.getTime()-nowtime.getTime(), leftd=Math.floor(lefttime/(1000*60*60*24)), lefth=Math.floor(lefttime/(1000*60*60)%24), leftm=Math.floor(lefttime/(1000*60)%60), lefts=Math.floor(lefttime/1000%60); p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts; setTimeout(showtime2, 1000); } function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"), lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m=Math.floor(lefttime/60%60), s=Math.floor(lefttime%60); p3.innerHTML=d+"天"+h+"小時"+m+"分"+s+"秒"; setTimeout(showtime3, 1000); } </script> </head> <body> 當前時間：<p id="p1"></p> 高考倒計時：<p id="p2"></p> 限時搶購：<p id="p3"></p> </body> </html>