使用计时器setInterval实现倒计时

先区分一下计时器setTimeout()和setInterval()两个定时器的区别：
setTimeout() 方法是延迟指定的毫秒数后执行函数体当中的代码；
而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
setTimeout()只执行一次，而setInterval可以循环重复调用。

//秒杀产品倒计时函数，需要使用定时器每秒时间数减一，setInterval可以循环反复执行而setTimeout只执行一次
function timeBack() {var timetotal=3800;//设置倒计时总时间以秒为单位var timebox=document.querySelector(".flashSale_time").querySelectorAll("span");var timeInterval=setInterval(function () {//倒计时结束清除定时器if(timetotal<0){clearInterval(timeInterval);return;}var h=Math.floor(timetotal/3600);//Math.floor向下取整var m=Math.floor(timetotal%3600/60);var s=timetotal%60;// console.log(h+":"+m+":"+s);timebox[0].innerHTML=Math.floor(h/10);timebox[1].innerHTML=Math.floor(h%10);timebox[3].innerHTML=Math.floor(m/10);timebox[4].innerHTML=Math.floor(m%10);timebox[6].innerHTML=Math.floor(s/10);timebox[7].innerHTML=Math.floor(s%10);timetotal--;},1000);
}

倒计时效果图：

使用计时器setInterval实现倒计时相关推荐

html里的swal添加倒计时,使用甜蜜警报插件的setInterval函数倒计时
我试图实现倒计时到sweetAlert.在不活动20分钟后,会弹出甜蜜警报并显示会话即将超时,并且用户有两种选择:注销或继续,这将重新启动空闲计时器.当鼠标移动或点击时,空闲计时器也会重置.我的问题是 ...
设计一个以51单片机为控制器的2位的LED数码管“计时器”，实现倒计时功能。利用Keil软件编写程序，Proteus软件搭建系统仿真模型，
设计一个以51单片机为控制器的2位的LED数码管"计时器",实现倒计时功能.利用Keil软件编写程序,Proteus软件搭建系统仿真模型,系统要求如下: 1.利用开关Switch1 ...
HTML+CSS+JavaScript计时器实现新年倒计时
今天我们距离2021年春节还有多久呢?是不是很想知道~那我们用代码来写一写,看看到底是多久! HTML <!DOCTYPE html> <html lang="en&quo ...
vue计时器代码和倒计时代码
计时器 <template><div><h2>{{ time }}</h2><button @click="start"> ...
关于setInterval设置倒计时只执行一次，clearInterval停止
使用setInterval方法实现如图倒计时,但实际运行只运行了一遍源代码如下: var s = setInterval(time,1000); var n = 10; function time( ...
js实现计时器---解决活动倒计时(还有多少天、时、分、秒)
活动倒计时,是非常重要且常见的形式,例如京东.淘宝等商品活动,优惠或者打折所呈现的形式. 话不多说,上代码!!! <!DOCTYPE html> <html><head ...
简单html倒计时器代码,js倒计时简单实现代码
倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 html 天时分秒 js代码 ...
打字软件带倒计时_使用VueJS创建打字速度效果-第2部分：计时器和计分板
打字软件带倒计时 Introduction In Part 1 - Create a Typing Speed Effect with VueJS We saw how to create a Typ ...
android listview中item倒计时,GitHub - TangAnna/ListViewTimer: 列表中每一个item都有计时器（可实现倒计时或者计时器的功能）...
ListViewTimer 列表中每一个item都有计时器 (可实现倒计时或者计时器的功能) 项目中有时会遇到列表中含有倒计时或者是计时器的需求,实现的方式有很多种,此Demo中是使用Thread + ...
JavaScript制作页面倒计时器
制作页面倒计时器,选定一个未来时间,得到几天几时几分几秒的倒计时. 在这里选择使用两个时间相差的毫秒数来计算相对应的天数.小时数.分钟数和秒数.为了使代码看起来简洁,进行了封装函数. 1.setInt ...

使用计时器setInterval实现倒计时

使用计时器setInterval实现倒计时相关推荐

最新文章

热门文章