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 29 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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/01/08 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Vue.js 插件开发详解
2017/03/29 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
学校门卫工作职责
2013/12/07 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
校庆接待方案
2014/03/18 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
关于召开会议的通知
2015/04/15 职场文书
幼儿园教师教学反思
2016/03/02 职场文书