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 相关文章推荐
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
js实现京东轮播图效果
Jun 30 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
JavaScript使用canvas绘制坐标和线
Apr 28 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编写PDF文档生成器
2006/10/09 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Python使用OpenCV进行标定
2018/05/08 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
自我评价个人范文
2013/12/16 职场文书
大学校运会广播稿
2014/02/03 职场文书
运动会邀请函范文
2014/02/06 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2014年冬季防火方案
2014/05/21 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
使用python绘制横竖条形图
2022/04/21 Python