定时器

1、定时器简单应用

<style type="text/css"> #box{ width: 150px; height: 150px; background: red; border-radius: 50%; text-align: center; line-height: 150px; color: white; font-weight: bold; margin: 20px; font-size: 30px; } </style> <button id="btn">倒计时开始</button> <div id="box"> 5 </div> <script type="text/javascript"> //倒计时 var btn = document.getElementById("btn"); var box = document.getElementById("box"); btn.onclick = function(){ //获取box内容 var num = Number(box.innerText);//直接获取文本 var timer = setInterval(function(){ num--; box.innerText = num; //当前num为0时，时间到 if(num === 0){ //清除定时器 clearInterval(timer); setTimeout(function(){ box.innerText = "GO"; },500) } },1000); } </script>

2、商品活动倒计时

<h1 id="showTime"></h1> //商品活动倒计时 //活动结束日期 //当前时间 //获取时间差 //根据时间差计算天，时，分，秒 //把天，时，分，秒显示在页面 //用定时器控制秒。 //获取元素 var showTime = document.getElementById("showTime"); //结束日期 var endDate = new Date("2020/10/20 20:53:40");//直接写死 //当前时间 var nowDate = new Date(); //时间差 调用获取时间差函数⭐⭐⭐需要调用js时间差 var s = parseInt(getDifTime(nowDate,endDate)); //初始化页面内容。 init(s);//⭐⭐ function init(s){ if(s <= 0){ showTime.innerHTML = "商品活动时间已结束"; return; } //根据时间差的秒数来计算天，时，分，秒 var hours = s / 60 / 60; //console.log(d); //hours/24:1.9791626041666666 var d = parseInt(hours/24); var h = parseInt((hours/24 - d) * 24);//⭐⭐ var f = parseInt(((hours/24 - d) * 24 - h) * 60); var m = parseInt((((hours/24 - d) * 24 - h) * 60 - f) * 60); showTime.innerHTML = "距离商品活动结束还剩"+d+"天" + h + "时"+f+"分"+m+"秒";//⭐ } //定时器控制秒 var timer = setInterval(function(){ s--; console.log(s); if(s <= 0){ showTime.innerHTML = "商品活动时间已结束"; //清除定时器 clearInterval(timer); return; } init(s); },1000);