编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现秒杀倒计时特效

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript判断前缀、后缀是否是空格的方法

Apr 15 Javascript

基于zepto.js简单实现上传图片

Jun 21 Javascript

javaScript事件机制兼容【详细整理】

Jul 23 Javascript

js实现目录链接,内容跟着目录滚动显示的简单实例

Oct 15 Javascript

js 定位到某个锚点的方法

Nov 19 Javascript

jquery实现图片放大点击切换

Jun 06 jQuery

使用socket.io实现简单聊天室案例

Jan 02 Javascript

Angular4 ElementRef的应用

Feb 26 Javascript

教你如何编写Vue.js的单元测试的方法

Oct 17 Javascript

手挽手带你学React之React-router4.x的使用

Feb 14 Javascript

Vue SPA 初次进入加载动画实现代码

Nov 14 Javascript

解决pycharm双击但是无法打开的情况

Oct 31 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