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

1月以前  |  阅读数:7 次  |     收藏

本文实例讲述了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>

显示

相关文章:


SSH 登录失败:Host key verification failed

PHP分页显示制作详细讲解

PHP自定义函数获取搜索引擎来源关键字的方法

在Zeus Web Server中安装PHP语言支持

再谈PHP中单双引号的区别详解

让你成为最历害的git提交人

将二进制数据转为16进制以便显示

php+ajax+json 详解及实例代码

PHP实现简单爬虫的方法

Python 2与Python 3版本和编码的对比

php实现数组中索引关联数据转换成json对象的方法

桌面中心(一)创建数据库

PHP设计模式之工厂模式与单例模式

php数组合并array_merge()函数使用注意事项

php封装的page分页类完整实例

wget使用技巧

getAttribute和getAttributeNode

获取IMSI

Yii2汉字转拼音类的实例代码

python中执行shell的两种方法总结