html小米秒杀倒计时,JavaScript_JQuery仿小米手机抢购页面倒计时效果，1、效果及功能说明 通过对时 - phpStudy...

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毫秒以后启动

});