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弹幕效果
May 06 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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(二)
2012/03/21 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
php swoft框架实例用法
2020/12/22 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
深入理解vue Render函数
2017/07/19 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
python多线程方式执行多个bat代码
2016/06/07 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python新手学习raise用法
2020/06/03 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
用友笔试题目
2016/10/25 面试题
个人承诺书
2014/03/26 职场文书
社团活动总结书
2014/06/27 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
入党个人总结范文
2015/03/02 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
员工工作心得体会
2019/05/07 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server