html设置秒杀倒计时盒子,jQuery实现每日秒杀商品倒计时功能

html & js：

jQuery每日秒杀倒计时

倒计时

COUNT DOWN

距离结束还剩

00

00

00

$(document).ready(function () {

var oDate = new Date();

var nowTime = oDate.getTime(); //现在的毫秒数

oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天

var targetDate = new Date(oDate.toLocaleDateString());

run(targetDate);

});

function run(enddate) {

getDate(enddate);

setInterval("getDate('" + enddate + "')", 500);

}

function getDate(enddate) {

var oDate = new Date(); //获取日期对象

var nowTime = oDate.getTime(); //现在的毫秒数

var enddate = new Date(enddate);

var targetTime = enddate.getTime(); // 截止时间的毫秒数

var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；

second = second % 86400; //余数代表剩下的秒数；

var hour = Math.floor(second / 3600); //整数部分代表小时；

second %= 3600; //余数代表 剩下的秒数；

var minute = Math.floor(second / 60);

second %= 60;

var spanH = $('.se-txt')[0];

var spanM = $('.se-txt')[1];

var spanS = $('.se-txt')[2];

spanH.innerHTML = tow(hour);

spanM.innerHTML = tow(minute);

spanS.innerHTML = tow(second);

}

function tow(n) {

return n >= 0 && n < 10 ? '0' + n : '' + n;

}

css：

(zzsc.cs)

* {

margin: 0;

padding: 0;

}

.se-kl {

width: 190px;

height: 275px;

background-color: #e83632;

margin: 100px auto;

position: relative;

}

.se-cn {

position: absolute;

top: 42px;

left: 0;

width: 100%;

text-align: center;

font-size: 34px;

color: #fff;

}

.se-en {

position: absolute;

top: 90px;

left: 0;

width: 100%;

text-align: center;

font-size: 20px;

color: rgba(255, 255, 255, 0.5);

}

.se-io {

width: 20px;

height: 33px;

position: absolute;

background: url(../imgs/seckill.png) no-repeat;

background-position: -32.5px 0;

background-size: 52.5px 40px;

left: 85px;

top: 126px;

display: block;

}

.se-info {

position: absolute;

top: 170px;

text-align: center;

width: 100%;

font-size: 16px;

color: #fff;

}

.se-count {

position: absolute;

top: 212px;

left: 30px;

height: 40px;

}

.se-day {

display: none;

}

.se-hour,

.se-min,

.se-sec {

position: relative;

background-color: #2f3430;

width: 40px;

height: 40px;

float: left;

text-align: center;

line-height: 40px;

margin-right: 5px;

}

.se-txt {

font-size: 20px;

font-weight: bold;

color: #fff;

}

.se-txt:before {

content: "";

display: block;

position: absolute;

top: 50%;

left: 0;

width: 100%;

height: 1px;

background-color: #e83632;

}

示例图1：

注：本程序依赖于jquery库，请自行下载并选择合适路径或使用远程cdn地址：

总结

以上所述是小编给大家介绍的jQuery实现每日秒杀商品倒计时功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！