当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

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

2019年09月06日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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)转换工具：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网