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 获取和设置select下拉框的值实现代码
Nov 08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
javascript事件模型介绍
May 31 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
在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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
如何一键升级Python所有包
2020/11/05 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
培训讲师岗位职责
2014/04/13 职场文书
师德师风的心得体会
2014/09/02 职场文书
务虚会发言材料
2014/12/25 职场文书
承诺函格式模板
2015/01/21 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
python_tkinter事件类型详情
2022/03/20 Python