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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
推荐信格式要求
2014/05/09 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2014年财务科工作总结
2014/11/11 职场文书
销售员岗位职责范本
2015/04/11 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电