JS实现秒杀倒计时特效


Posted in Javascript onJanuary 02, 2020

本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下

知识点

添加一个定时器,对时间标签不断进行更新设置即可。
引入工具库工具库

运行效果

JS实现秒杀倒计时特效

代码

引入MyTool.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      font-size: 30px;
    }
    span{
      background-color: #000;
      color: #fff;
      border-radius: 10px;
      padding: 0 5px;
    }
  </style>
</head>
<body>
<div id="box">
  <span>00</span>:<span>00</span>:<span>00</span>
</div>
<script src="../00MyTools/MyTools.js"></script>
<script>
  window.addEventListener('load',function (ev) {
    var hour = myTool.$('box').children[0], min = myTool.$('box').children[1], sec = myTool.$('box').children[2];
    var time = 8 * 60 * 60;
    var timer = setInterval(function () {
      time--;
      hour.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).hour);
      min.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).min);
      sec.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).second);
      if (time===0){
        clearInterval(timer);
      }
    },1000);
  },false);
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
setTimeout学习小结
Feb 08 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 #Javascript
JS实现导航栏楼层特效
Jan 01 #Javascript
JS实现旋转木马轮播图
Jan 01 #Javascript
JS实现普通轮播图特效
Jan 01 #Javascript
javascript实现超好看的3D烟花特效
Jan 01 #Javascript
JavaScript工具库MyTools详解
Jan 01 #Javascript
javascript Canvas动态粒子连线
Jan 01 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
一个图形显示IP的PHP程序代码
2007/10/19 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
JS实现动态无缝轮播
2020/01/11 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
详解Python传入参数的几种方法
2019/05/16 Python
一些高难度的SQL面试题
2016/11/29 面试题
人力资源经理自我评价
2014/01/04 职场文书
文秘个人求职信范文
2014/04/22 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
五年级学生评语大全
2014/12/26 职场文书
客户经理岗位职责
2015/01/31 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
电工生产实习心得体会
2016/01/22 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL