JS秒杀倒计时功能完整实例【使用jQuery3.1.1】(JS,倒计时,秒杀,web开发)

时间:2024-05-09 14:21:01 作者 : 石家庄SEO 分类 : web开发
  • TAG :

本文实例讲述了JS秒杀倒计时功能。分享给大家供大家参考,具体如下:

代码

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body onload="miaosha();"> <p class="tit_right" > <span id="d" >00</span>天 <span id="h" >00</span>时 <span id="m" >00</span>分 <span id="s" >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>

显示

JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线秒表工具:
http://tools.jb51.net/bianmin/miaobiao

在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:JS秒杀倒计时功能完整实例【使用jQuery3.1.1】的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Webpack中loader打包各种文件的方法实例下一篇:

4 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18