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


Posted in jQuery onSeptember 03, 2019

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

显示

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

jQuery 相关文章推荐
jQuery Position方法使用和兼容性
Aug 23 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
Jquery动态列功能完整实例
Aug 30 #jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
You might like
获取URL文件名后缀
2013/10/24 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python unittest单元测试框架总结
2018/09/08 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python调试神器PySnooper的使用
2019/07/03 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python是怎样处理json模块的
2020/07/16 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
经济系大学生求职信
2013/10/01 职场文书
优秀班组长事迹
2014/05/31 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
用python实现监控视频人数统计
2021/05/21 Python
MySQL的索引你了解吗
2022/03/13 MySQL