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滑动到底部加载下一页数据的实例代码
May 22 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 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 获得汉字拼音首字母的函数
2009/08/01 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python实现处理mysql结果输出方式
2020/04/09 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
晚宴邀请函范文
2014/01/15 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书