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 EasyUI $.Parser
Jun 02 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
使用jQuery实现购物车
Oct 29 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
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
php生成微信红包数组的方法
2019/09/05 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript String 对象
2008/04/25 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
python学习之编写查询ip程序
2016/02/27 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
初三学习决心书
2014/03/11 职场文书
党课培训心得体会
2014/09/02 职场文书
关于远足的感想
2015/08/10 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
python 详解turtle画爱心代码
2022/02/15 Python