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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现日历效果
Sep 11 jQuery
jquery插件实现搜索历史
Apr 24 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
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php数组指针操作详解
2017/02/14 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
canvas绘制七巧板
2017/02/03 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python版本的仿windows计划任务工具
2018/04/30 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python实现的分层随机抽样案例
2020/02/25 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
Servlet的生命周期
2013/08/25 面试题
经典公益广告词
2014/03/13 职场文书
奶茶店创业计划书
2014/08/14 职场文书
公证委托书格式
2014/09/13 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
个人专业技术总结
2015/03/05 职场文书
幽灵公主观后感
2015/06/09 职场文书
社区安全温馨提示语
2015/07/14 职场文书
python套接字socket通信
2022/04/01 Python