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实现字体颜色渐变效果的方法
Mar 29 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python 爬取疫情数据的源码
2020/02/09 Python
Django分组聚合查询实例分享
2020/04/29 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
SQL Server面试题
2013/04/04 面试题
《小池塘》教学反思
2014/02/28 职场文书
介绍信范文
2015/01/31 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js