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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jQuery each和js forEach用法比较
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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
smarty获得当前url的方法分享
2014/02/14 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
vue 组件简介
2020/07/31 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python assert语句的简单使用示例
2019/07/28 Python
简单介绍django提供的加密算法
2019/12/18 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
以下的初始化有什么区别
2013/12/16 面试题
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers