利用js實現倒計時

  倒計時 這個名詞並不陌生，比如：天貓，京東等一些網上商城都會推出一些限時特價商品，今天我們就一起編寫一個屬於自己的倒計時；

　　　　

　　　　Ps: 首先做一件事情的時候，不應該盲目的去做，應該首當其沖的去想，腦子里面出現大概的思路。

 

一、首先我們應該在HTML放一個容器（這里面沒有什么可解釋的就是為了呈現倒計時）；

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<! DOCTYPE  html> < html  lang="en"> < head >      < meta  charset="UTF-8">      < title >倒計時制作</ title >      < style >          .otime span{display:inline-block;padding: 10px 20px;opacity: 0.5;margin-left: 10px;color:red;}      </ style > </ head > < body >      < div  class="text">         < p >距離元旦還剩余:< span  id="time" class="otime"></ span ></ p >         < p >當前時間：< span  id="time1" class="otime"></ span ></ p >      </ div > </ body > </ html >

 

二、編寫JS代碼

//這個函數是為了適應格式 比如：01分01秒;
    function p (n){
        return n < 10 ? '0'+ n : n;  
    }

    //倒計時函數
    function newTime (){
        //定義當前時間
        var startTime = new Date(); 
        //定義結束時間
        var endTime = new Date("2017/1/1 00:00:00");
        
        //算出中間差並且已毫秒數返回; 除以1000將毫秒數轉化成秒數方便運算；
        var countDown = (endTime.getTime() - startTime.getTime())/1000;
        
        //獲取天數 1天 = 24小時  1小時= 60分 1分 = 60秒
        var oDay = parseInt(countDown/(24*60*60));
        
        //獲取小時數 
        //特別留意 %24 這是因為需要剔除掉整的天數;
        var oHours = parseInt(countDown/(60*60)%24);
        
        //獲取分鍾數
        //同理剔除掉分鍾數
        var oMinutes = parseInt(countDown/60%60);
        
        //獲取秒數
        //因為就是秒數  所以取得余數即可
        var oSeconds = parseInt(countDown%60);
        
        //下面就是插入到頁面事先准備容器即可;
        var html =  "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "時</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";
        document.getElementById('time').innerHTML = html;
        
        //別忘記當時間為0的，要讓其知道結束了;
        if(countDown < 0){
            document.getElementById('time').innerHTML = '元旦到了';
        }
    }
　　　

 

　這樣就實現了一個計時器的效果，如果想要好看一點，只需要加點樣式即可；

 

三、制作當前時間的秒表（也就是第二個容器需要做的）

 

1、直接編寫JS代碼　

 1 function oldTime (){
 2         var oDate = new Date();
 3         //獲取年
 4         var oFullyear = oDate.getFullYear();
 5         //獲取月份
 6         var oMonth = oDate.getMonth()+1;
 7         //獲取日期
 8         var oDta= oDate.getDate();
 9         //獲取星期
10         var oDay = oDate.getDay();
11         var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
12         //獲取小時
13         var oHours = oDate.getHours();
14         //獲取分鍾
15         var oMinutes = oDate.getMinutes();
16         //獲取秒數
17         var oSeconds = oDate.getSeconds();
18         //插入到容器中
19         var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"時</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>";
20         document.getElementById('time1').innerHTML = b;
21 
22     }

 

　---》如果學會了，不妨自己試一下，看看能不能做出更高級的計時哦;