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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
来自qq的javascript面试题
Jul 24 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue mixins组件复用的几种方式(小结)
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中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
JavaScript延迟加载
2021/03/09 Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python3.x中自定义比较函数
2015/04/24 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
大学生村官工作感言
2014/01/10 职场文书
高中生物教学反思
2014/02/05 职场文书
会计学自我鉴定
2014/02/06 职场文书
调研座谈会发言材料
2014/08/23 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
党校个人总结
2015/03/04 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android