生活随笔
收集整理的這篇文章主要介紹了
JQuery模仿淘宝天猫魔盒抢购页面倒计时效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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，簡單吧~
轉載于:https://www.cnblogs.com/ranzige/p/jquery_tianmao_mehe.html
總結
以上是生活随笔為你收集整理的JQuery模仿淘宝天猫魔盒抢购页面倒计时效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
