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实现的简单在线计算器功能
May 11 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 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
改进的IP计数器
2006/10/09 PHP
PHP开发负载均衡指南
2010/07/17 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
ASP Json Parser修正版
2009/12/06 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python KMeans聚类问题分析
2018/02/23 Python
python中的二维列表实例详解
2018/06/19 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
2014元旦晚会策划方案
2014/02/19 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
英文自荐信范文
2015/03/25 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis