JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要介绍了JS秒杀倒计时功能,结合完整实例形式分析了基于jQuery3.1.1基于时间函数的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JS秒杀倒计时功能。分享给大家供大家参考，具体如下：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="miaosha();">
<p class="tit_right" style="">
<span id="d" style="">00</span>天
<span id="h" style="">00</span>时
<span id="m" style="">00</span>分
<span id="s" style="">00</span>秒
</p>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var timer = null;
// 秒杀函数
function miaosha(year, month, day, hour, minute, second) {
// 剩余时间：设定的-当前的
var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date());
// parseInt()返回一个整数。得出剩余的时分秒
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10);
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
var seconds = parseInt(leftTime / 1000 % 60, 10);
// 结束的时候
if (seconds < 0) {
alert("快点！");
clearTimeout(timer);
}
else {
// 格式的转化
days = fix(days, 2);
hours = fix(hours, 2);
minutes = fix(minutes, 2);
seconds = fix(seconds, 2);
// 递归调用 注意：比当前时间大！
timer = setTimeout("miaosha(2019,09,05,10,56,00)", 1000); //// 设置开始的时间
// 设置时分秒
document.getElementById("h").innerHTML = hours;
document.getElementById("m").innerHTML = minutes;
document.getElementById("s").innerHTML = seconds;
document.getElementById("d").innerHTML = days;
}
}
//fix函数：数字加0
function fix(num, length) {
console.log(num);
// 数字转化为字符串 进行拼接
return num.toString().length<length?'0'+num:num;
}
</script>
显示
PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：
在线秒表工具：
在线日期/天数计算器：
在线日期天数差计算器：
Unix时间戳(timestamp)转换工具：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。