原生js實現一個簡單的倒計時功能

時間 2019-11-22

原文原文鏈接

　　你們好，我是雲中君！歡迎你們來觀看個人博客javascript

以前那，在羣裏看到不少人問，關於電商網站中的倒計時功能怎麼實現，不少人說在網上找了不少插件，可是不是很會用，因此今天就在這裏分享一下我封裝的一個小的倒計時功能！css

下面是佈局代碼！html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/index.css" rel="stylesheet">
    </head>
    <body>
    <!--用的時候把下面這個代碼放到你那個放倒計時的盒子裏面就行了-->
        <span class = "span1" id="time1" data-time="2017/11/19 23:32"> 本場剩餘： <!----data-time用來存放你商品到期的時間，時間格式就按照上面格式就好--->
            <!--每一個span的id要惟一，調用函數的時候就是要傳id這一個參數-->
                <em></em> 天 <em></em> 小時 <em></em> 分 <em></em> 秒 <!--em標籤用來放置咱們所要顯示的時間--->
        </span>    
        <script type="text/javascript" src="js/js.js"></script>
        <!--在這裏調用js文件，裏面是封裝的倒計時的js函數-->
    </body>
</html>

　　怎麼樣，佈局很簡單吧！接下來是咱們的css代碼，本人並無作太多的設置，你們根據本身的喜愛來設置不一樣的樣式，這樣都是能夠的！java

span{font-size:12px;color:#666;} em{font-style:normal;color:red;font-size:12px;}
/******這裏是css，你們能夠根據本身的喜愛更改到本身的style，筆者只是在這裏簡單的作了一些設置********/

　　接下來就是咱們的js代碼了函數

function getTime(id){
        var timer = null;//這裏設置time爲null，用於下面來清除計時器
        var obj = document.getElementById(id)//獲取到放置時間數據的span的id
        timer = setInterval(function(){//設置定時器，來更新時間
                var a = new Date((obj.getAttribute("data-time"))).getTime();
                //上面這一步可能比較複雜，咱們首先來看obj.getAttribute("data-time")這一句。這個是用來獲取指定標籤的data-time屬性，
即咱們要使用的到期時間，而後來看new Date().getTime(),這一句是用來獲取咱們所設置到期時間的時間戳，用於下面的計算，這個獲取的是固定的數值
                var b = new Date().getTime();//這是獲取當前時間，是一個不固定的數值
                var d = 0,s=0,h=0,m=0;//定義變量
                var ee = obj.getElementsByTagName("em")//獲取佈局中的em標籤用於存取數據
                d = Math.floor((a - b)/1000/60/60/24);//獲取剩餘天數
                h = Math.floor((a - b)/1000/60/60%24);//獲取剩餘小時
                m = Math.floor((a - b)/1000/60%60);//獲取剩餘分鐘
                s = Math.floor((a - b)/1000%60);//獲取剩餘秒數


                
                
                
                //中間這塊區域是用來判斷，當前時間數值小於10的時候給他前面加個0，這裏能夠根據具體狀況可加可不加，如下同理
                if(d < 10){
                    d = "0" + d
                }else if(d < 0){
                    d = 0
                }
                if(h < 10){
                    h = "0" + h
                }else if(h < 0){
                    h = 0
                }
                if(m < 10){
                    m = "0" + m;
                }else if(m < 0){
                    m = 0;
                }
                if(s < 10){
                    s = "0" + s;
                }else if(s < 0){
                    s = 0;
                }

   
                ee[0].innerHTML = d;
                ee[1].innerHTML = h;
                ee[2].innerHTML = m;
                ee[3].innerHTML = s;
                if(a <= b){//當咱們的時間到期的時候，清除計時器，而後把當前標籤的內容設置爲0；
                    clearInterval(timer);
                    ee[0].innerHTML = 00;
                    ee[1].innerHTML = 00;
                    ee[2].innerHTML = 00;
                    ee[3].innerHTML = 00;
                }
            },1000)
}
getTime("time1")//這裏用來調用這個函數，傳入id

　　這裏咱們就作好了一個倒計時的功能了！你們有不懂得地方能夠加筆者的qq來和我一塊兒討論，歡迎你們來交流！qq：785228195