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

1、效果及功能說明

通過對時間的控制來告訴用戶一個活動還剩多少時間，精確到秒。

2、實現原理

首先定義活動的截至的時間，要重年份精確到毫秒，在獲得當前的年份到秒鐘，在用截至時間，減去現在的時間，剩下的還有多少的時間就把還剩下的時間給顯示出來就得出了離截止日期還有多久。

主要代碼

http://code.jquery.com/jquery-1.9.1.js">

*{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;}

本次活動已結束。天時分秒

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毫秒以后啟動

});

總結

以上是生活随笔為你收集整理的html小米秒杀倒计时,JavaScript_JQuery仿小米手机抢购页面倒计时效果，1、效果及功能说明通过对时 - phpStudy...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。