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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
js DOM的学习笔记
Dec 22 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
QML实现圆环颜色选择器
Sep 25 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
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
php的扩展写法总结
2019/05/14 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
python连接字符串的方法小结
2015/07/13 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python加载自定义词典实例
2019/12/06 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
商学院大学生求职的自我评价
2014/03/12 职场文书
项目建议书范文
2014/05/12 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
优秀护士事迹材料
2014/12/25 职场文书
海上钢琴师观后感
2015/06/03 职场文书
小学数学教学随笔
2015/08/14 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js