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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
python编写的最短路径算法
2015/03/25 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python django中8000端口被占用的解决
2019/12/17 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
2014年置业顾问工作总结
2014/11/17 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
文明班级申报材料
2014/12/24 职场文书
办公室岗位职责
2015/02/04 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js