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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
vue中 this.$set的用法详解
Sep 06 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 删除cookie方法详解
2014/12/01 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python有序字典简单实现方法示例
2017/09/28 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
社会学专业求职信
2014/07/17 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
应收账款管理制度
2015/08/06 职场文书
师德培训心得体会2016
2016/01/09 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS