首页 > 编程 > JavaScript > 正文

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

2019-11-19 10:54:27
字体:
来源:转载
供稿:网友

本文实例讲述了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:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线秒表工具:
http://tools.VeVB.COm/bianmin/miaobiao

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

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

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

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表