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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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制作静态网站的模板框架(三)
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
微信支付的开发流程详解
2016/09/13 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python 线程池用法简单示例
2019/10/02 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Keras自定义IOU方式
2020/06/10 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
如何清空python的变量
2020/07/05 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
中文师范生自荐信
2014/01/30 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
工程资料员岗位职责
2015/04/13 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
Python代码实现双链表
2022/05/25 Python