JQuery仿小米手機(jī)搶購頁面倒計(jì)時(shí)效果

1、效果及功能說明

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

2、實(shí)現(xiàn)原理

首先定義活動的截至的時(shí)間，要重年份精確到毫秒，在獲得當(dāng)前的年份到秒鐘，在用截至?xí)r間，減去現(xiàn)在的時(shí)間，剩下的還有多少的時(shí)間就把還剩下的時(shí)間給顯示出來就得出了離截止日期還有多久。

主要代碼

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

本次活動已結(jié)束。天時(shí)分秒

var startTime = new Date();

//定義參數(shù)可返回當(dāng)天的日期和時(shí)間

startTime.setFullYear(2016, 5, 27);

//調(diào)用設(shè)置年份

startTime.setHours(23);

//調(diào)用設(shè)置指定的時(shí)間的小時(shí)字段

startTime.setMinutes(59);

//調(diào)用設(shè)置指定時(shí)間的分鐘字段

startTime.setSeconds(59);

//調(diào)用設(shè)置指定時(shí)間的秒鐘字段

startTime.setMilliseconds(999);

//調(diào)用置指定時(shí)間的毫秒字段

var EndTime=startTime.getTime();

//定義參數(shù)可返回距 1970 年 1 月 1 日之間的毫秒數(shù)

function GetRTime(){

//定義方法

var NowTime = new Date();

//定義參數(shù)可返回當(dāng)天的日期和時(shí)間

var nMS = EndTime - NowTime.getTime();

//定義參數(shù) EndTime減去NowTime參數(shù)獲得返回距 1970 年 1 月 1 日之間的毫秒數(shù)

var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));

//定義參數(shù) 獲得天數(shù)

var nH = Math.floor(nMS/(1000*60*60)) % 24;

//定義參數(shù) 獲得小時(shí)

var nM = Math.floor(nMS/(1000*60)) % 60;

//定義參數(shù) 獲得分鐘

var nS = Math.floor(nMS/1000) % 60;

//定義參數(shù) 獲得秒鐘

if (nMS < 0){

//如果秒鐘大于0

$("#dao").hide();

//獲得天數(shù)隱藏

$("#daoend").show();

//獲得活動截止時(shí)間展開

}else{

//否則

$("#dao").show();

//天數(shù)展開

$("#daoend").hide();

//活動截止時(shí)間隱藏

$("#RemainD").text(nD);

//顯示天數(shù)

$("#RemainH").text(nH);

//顯示小時(shí)

$("#RemainM").text(nM);

//顯示分鐘

$("#RemainS").text(nS);

//顯示秒鐘

}

}

$(document).ready(function () {

//定義方法

var timer_rt = window.setInterval("GetRTime()", 1000);

//定義參數(shù) 顯示出GetRTime()方法 1000毫秒以后啟動

});

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。