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编写textarea输入字数限制代码
Mar 23 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现本地存储
Dec 22 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP+ajax 无刷新删除数据
2010/02/20 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python面试题小结附答案实例代码
2019/04/11 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
利用python实现逐步回归
2020/02/24 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
2015年酒店前台工作总结
2015/04/20 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Python安装使用Scrapy框架
2022/04/12 Python
MYSQL常用函数介绍
2022/05/05 MySQL