大家好，我是雲中君！歡迎大家來觀看我的博客
之前那，在群里看到很多人問，關於電商網站中的倒計時功能怎么實現，很多人說在網上找了很多插件，但是不是很會用，所以今天就在這里分享一下我封裝的一個小的倒計時功能！
下面是布局代碼！
<!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代碼，本人並沒有做太多的設置，大家根據自己的喜好來設置不同的樣式，這樣都是可以的！
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