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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jquery实现广告上下滚动效果
Mar 04 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多图上传小程序代码
2011/07/17 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
分析Python中解析构建数据知识
2018/01/20 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
python使用selenium实现批量文件下载
2019/03/11 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
教师求职自荐信
2014/03/09 职场文书
商务日语专业自荐信
2014/04/17 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
安全宣传标语
2014/06/10 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
银行贷款委托书范本
2014/10/11 职场文书
初一语文教学反思
2016/03/03 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
分析Python list操作为什么会错误
2021/11/17 Python