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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
ThinkPHP之getField详解
2014/06/20 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP类的特性实例分析
2016/09/28 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
关于php开启错误提示的总结
2019/09/24 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JavaScript异步加载问题总结
2018/02/17 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
js实现点击烟花特效
2020/10/14 Javascript
Python字符转换
2008/09/06 Python
Python兔子毒药问题实例分析
2015/03/05 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
python实现基本进制转换的方法
2015/07/11 Python
Python实现KNN邻近算法
2021/01/28 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
高校辅导员推荐信范文
2013/12/25 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
钢琴师观后感
2015/06/12 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS