1、效果及功能說明
通過對時間的控制來告訴用戶一個活動還剩多少時間，精確到秒。
2、實現原理
首先定義活動的截至的時間，要重年份精確到毫秒，在獲得當前的年份到秒鐘，在用截至時間，減去現在的時間，剩下的還有多少的時間就把還剩下的時間給顯示出來就得出了離截止日期還有多久。
主要代碼
代碼如下:
var startTime = new Date();
//獲得當前的時間
startTime.setFullYear(2016, 5, 27);
//調用設置年份
startTime.setHours(23);
//調用設置指定的時間的小時字段
startTime.setMinutes(59);
//調用設置指定時間的分鐘字段
startTime.setSeconds(59);
//調用設置指定時間的秒鐘字段
startTime.setMilliseconds(999);
//調用置指定時間的毫秒字段
var EndTime=startTime.getTime();
//獲得截至的時間
var nMS = EndTime - NowTime.getTime();
//截至時間減去當前時間獲得剩余時間
var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//定義參數 獲得天數
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//定義參數 獲得小時
var nM = Math.floor(nMS/(1000*60)) % 60;
//定義參數 獲得分鐘
var nS = Math.floor(nMS/1000) % 60;
//定義參數 獲得秒鐘 這些就是當前時間
3、運行環境
IE6 IE7 IE8及以上 Firefox 和 Google
Chrome游覽器下都可實現
4、所有圖片的壓縮包新建一個文件後將包解壓放進文件夾圖片的壓縮包在頁面的最下方可以看到並下載下載後無需修改文件夾名因為本身就已經寫好了和html5內的路徑相吻合
5、將創建html文件保存的時候將編碼類型換成(UTF-8有簽名)這樣可以讓部分中文正常的顯示出來，將保存類型(T)換成(所有文件(*.*))，將html5和解壓後的圖片文件夾放在同一個文件夾內效果
6、代碼
代碼如下:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%;background:#fff;}
.timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}
.timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:"微軟雅黑","宋體";}
.timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}
#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}
</style>
</head>
<body>
<div class="timerbg">
<div id="daoend" style="display:none;">本次活動已結束。</div>
<div id="dao"><strong id="RemainD"></strong>天<strong id="RemainH"></strong>時<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒</div>
</div>
<script type="text/javascript">
var startTime = new Date();
//定義參數可返回當天的日期和時間
startTime.setFullYear(2016, 5, 27);
//調用設置年份
startTime.setHours(23);
//調用設置指定的時間的小時字段
startTime.setMinutes(59);
//調用設置指定時間的分鐘字段
startTime.setSeconds(59);
//調用設置指定時間的秒鐘字段
startTime.setMilliseconds(999);
//調用置指定時間的毫秒字段
var EndTime=startTime.getTime();
//定義參數可返回距 1970 年 1 月 1 日之間的毫秒數
function GetRTime(){
//定義方法
var NowTime = new Date();
//定義參數可返回當天的日期和時間
var nMS = EndTime - NowTime.getTime();
//定義參數 EndTime減去NowTime參數獲得返回距 1970 年 1 月 1 日之間的毫秒數
var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//定義參數 獲得天數
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//定義參數 獲得小時
var nM = Math.floor(nMS/(1000*60)) % 60;
//定義參數 獲得分鐘
var nS = Math.floor(nMS/1000) % 60;
//定義參數 獲得秒鐘
if (nMS < 0){
//如果秒鐘大於0
$("#dao").hide();
//獲得天數隱藏
$("#daoend").show();
//獲得活動截止時間展開
}else{
//否則
$("#dao").show();
//天數展開
$("#daoend").hide();
//活動截止時間隱藏
$("#RemainD").text(nD);
//顯示天數
$("#RemainH").text(nH);
//顯示小時
$("#RemainM").text(nM);
//顯示分鐘
$("#RemainS").text(nS);
//顯示秒鐘
}
}
$(document).ready(function () {
//定義方法
var timer_rt = window.setInterval("GetRTime()", 1000);
//定義參數 顯示出GetRTime()方法 1000毫秒以後啟動
});
</script>
</body>
</html>
7、倒計時完成後，設置按鈕的hidden屬性為false，簡單吧~
本代碼是從本人項目中截取出來的，小伙伴們可以放心使用，如有疑問，請留言。