JS实现秒杀倒计时特效
更新时间：2020年01月02日 08:32:27 作者：KaiSarH
这篇文章主要为大家详细介绍了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 方法一些使用方法,注意看下他的函数。2009-05-05
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值，本文给大家介绍javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别，需要的朋友参考下2015-11-11
由 element.appendChild(newNode) ,谈开去
由 element.appendChild(newNode) ,谈开去...2006-11-11
这篇文章主要给大家介绍了关于JavaScript中arguments的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本篇文章主要介绍了webpack+vue2构建vue项目骨架的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了JavaScript 引用类型之原始值包装类型String,String是对应字符串的引用类型。要创建一个String 对象，使用String 构造函数并传入一个数值,更多相关内容需要的朋友可以参考一下2022-07-07
本文主要给大家介绍了javascript的一些函数定义方面的基础知识，包括函数声明式、函数表达式、Function 构造函数等，十分的简单实用，有需要的小伙伴可以参考下。2015-06-06
在 TypeScript 中，映射类型可以帮助我们避免编写重复的代码，它可以根据现有类型和定义的一些规则来创建新类型。本文我们就来看一下什么是映射类型以及如何构建自己的映射类型2022-08-08
为了给用户一个流畅的体验,token过期后需要重新请求新的token替换过期的token。本文将详细介绍uniapp无痛刷新token方法。2021-06-06
这篇文章主要是对JS画线的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论