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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
js简单抽奖代码
2015/01/16 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
详解Python pygame安装过程笔记
2017/06/05 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python九九乘法表的实例
2017/09/26 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python远程连接MySQL数据库
2019/04/19 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
公务员个人自我评价分享
2013/11/06 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
写给父母的感谢信
2015/01/22 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
浅谈python数据类型及其操作
2021/05/25 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android