首頁  >  文章  >  web前端  >  JQuery仿小米手機搶購頁面倒數計時效果_jquery

JQuery仿小米手機搶購頁面倒數計時效果_jquery

WBOY
WBOY原創
2016-05-16 16:26:281685瀏覽

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、代碼

複製程式碼 程式碼如下:





陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn