JQuery仿小米手機搶購頁面倒計時效果
更新時間：2014年12月16日 14:27:36 投稿：hebedich
這篇文章主要介紹了JQuery仿小米手機搶購頁面倒計時效果，從功能到實現(xiàn)原理以及主要代碼都做了詳細的介紹，推薦給有相同需求的小伙伴。
1、效果及功能說明
通過對時間的控制來告訴用戶一個活動還剩多少時間，精確到秒。
2、實現(xiàn)原理
首先定義活動的截至的時間，要重年份精確到毫秒，在獲得當(dāng)前的年份到秒鐘，在用截至?xí)r間，減去現(xiàn)在的時間，剩下的還有多少的時間就把還剩下的時間給顯示出來就得出了離截止日期還有多久。
主要代碼
復(fù)制代碼 代碼如下:
var startTime = new Date();
//獲得當(dāng)前的時間
startTime.setFullYear(2016, 5, 27);
//調(diào)用設(shè)置年份
startTime.setHours(23);
//調(diào)用設(shè)置指定的時間的小時字段
startTime.setMinutes(59);
//調(diào)用設(shè)置指定時間的分鐘字段
startTime.setSeconds(59);
//調(diào)用設(shè)置指定時間的秒鐘字段
startTime.setMilliseconds(999);
//調(diào)用置指定時間的毫秒字段
var EndTime=startTime.getTime();
//獲得截至的時間
var nMS = EndTime - NowTime.getTime();
//截至?xí)r間減去當(dāng)前時間獲得剩余時間
var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//定義參數(shù) 獲得天數(shù)
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//定義參數(shù) 獲得小時
var nM = Math.floor(nMS/(1000*60)) % 60;
//定義參數(shù) 獲得分鐘
var nS = Math.floor(nMS/1000) % 60;
//定義參數(shù) 獲得秒鐘 這些就是當(dāng)前時間
3、運行環(huán)境
IE6 IE7 IE8及以上 Firefox 和 Google
Chrome游覽器下都可實現(xiàn)
4、所有圖片的壓縮包新建一個文件后將包解壓放進文件夾圖片的壓縮包在頁面的最下方可以看到并下載下載后無需修改文件夾名因為本身就已經(jīng)寫好了和html5內(nèi)的路徑相吻合
5、將創(chuàng)建html文件保存的時候?qū)⒕幋a類型換成(UTF-8有簽名)這樣可以讓部分中文正常的顯示出來，將保存類型(T)換成(所有文件(*.*))，將html5和解壓后的圖片文件夾放在同一個文件夾內(nèi)效果
6、代碼
復(fù)制代碼 代碼如下:
7、倒計時完成后，設(shè)置按鈕的hidden屬性為false，簡單吧~
本代碼是從本人項目中截取出來的，小伙伴們可以放心使用，如有疑問，請留言。
相關(guān)文章
jQuery mobile類庫使用時加載導(dǎo)航歷史的方法簡介
這篇文章主要介紹了jQuery mobile開發(fā)中加載導(dǎo)航歷史的方法,jQuery mobile是jQuery針對移動設(shè)備開發(fā)的JavaScript庫,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery實現(xiàn)frame之間互通的方法,結(jié)合實例形式分析了jQuery實現(xiàn)frame父子框架之間的調(diào)用操作實現(xiàn)方法,需要的朋友可以參考下2017-06-06
jQuery實現(xiàn)可展開折疊的導(dǎo)航效果示例
這篇文章主要介紹了jQuery實現(xiàn)可展開折疊的導(dǎo)航效果,結(jié)合實例形式分析了基于jquery.easing.1.3.js插件的展開折疊效果實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JQuery Ajax如何實現(xiàn)注冊檢測用戶名,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
jQuery模仿阿里云購買服務(wù)器選擇購買時間長度的代碼
jQuery仿阿里云購買服務(wù)器選擇時間長度,操作簡單，只需點擊所要選的時間段，對實現(xiàn)代碼感興趣的朋友參考下2016-04-04
這篇文章主要介紹了jQuery樣式操作方法，并通過實際案例更淺顯的理解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
springmvc接收jquery提交的數(shù)組數(shù)據(jù)代碼分享
這篇文章主要介紹了springmvc接收jquery提交的數(shù)組數(shù)據(jù)代碼分享，還是比較不錯的，這里分享給大家，供需要的朋友參考。2017-10-10
分類標(biāo)題呈現(xiàn)3D球狀效果，點擊分類標(biāo)題的時候，會彈出這個分類對應(yīng)的推薦文章列表。2010-07-07
當(dāng)頁面打開時我們需要執(zhí)行一些操作，下面為大家介紹三種不錯的方法，大家可以參考下2014-06-06
Jquery.addClass無效的情況想必有很多的朋友都有遇到過吧，下面為大家詳細的分析下，感興趣的朋友可不要錯過了哈2013-09-09