JS实现秒杀定时器动画效果

实现时间倒计时,时间到达0时0分0秒结束

1.先写出静态结构

<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .box {
    
               
       width: 200px;         
       height: 100px;            
       margin: 100px auto;        
   }
   span {
    
                
       display: inline-block;            
       width: 30px;            
       height: 40px;            
       line-height: 40px;            
       background-color: #222;            
       color: #fff;            
       text-align: center;            
       font-weight: 700;        
       }    
</style>
</head>
<body>    
    <div class="box">        
    	<span id="spanHour">01</span>        
    	<span>:</span>        
    	<span id="spanMin">10</span>        
    	<span>:</span>        
    	<span id="spanSec">15</span>    
    </div>
</body>
</html>

目前效果是这样的
在这里插入图片描述
2.获取页面元素： spanHour spanMin spanSec

let h = document.getElementById('spanHour');        
let m = document.getElementById('spanMin');        
let s = document.getElementById('spanSec');

3.需要按照事件做动画效果：一定要用到定时器：let timeId = setInterval(,1000)

let timeId = setInterval(function () {
    
    

},10);
//毫秒改成10是为了更快看到效果

4.获取元素中间的数据：innerText

let timeId = setInterval(function () {
    
    
 let hTime = h.innerText;            
 let mTime = m.innerText;            
 let sTime = s.innerText;
},10);

5.减去1s

let timeId = setInterval(function () {
    
    
 let hTime = h.innerText;            
 let mTime = m.innerText;            
 let sTime = s.innerText;
},10);
sTime--

6.判定秒：如果秒小于0，秒应该变成59

sTime--
if (sTime < 0) {
    
                    
    sTime = 59;               
     //  分钟应该减少1m                
    mTime--            
    };

7 判定分：如果分小于0，分应该变成59

if (mTime < 0) {
    
                   
    mTime = 59                
    // 8. 减1h                
    hTime--            
 };
 // console.log(hTime.mTime, sTime)//控制台检测已经有变动,定时器没动是因为还未赋值回显

数据要保证有2位

sTime = sTime < 10 ? "0" + sTime : sTime;
mTime = mTime < 10 ? "0" + parseInt(mTime) : mTime;
hTime = hTime < 10 ? "0" + parseInt(hTime) : hTime;
  //sTime不加parseInt是因为自减会改变自己
// console.log(typeof (sTime)) //number
// console.log(typeof (mTime)); //string

数据要回显给html

h.innerText = hTime;
m.innerText = mTime;
s.innerText = sTime;

判定：时分秒是否全部归0：清除定时器

 if (hTime == 0 && mTime == 0 && sTime == 0) {
    
                     
      clearInterval(timeId);
     }
}, 10);

在这里插入图片描述

总结:1.找到时分秒之间的关系.
2.获取元素后修改数据一定要回写到DOM元素中
3.为了保证数据的整个结构一致（都是2位数）：需要补充前导0（时分秒小于10），同时要注意数据本身拿到的是字符串，所以补充前导0的时候，要注意字符串本身是否已经包含了前导0;

还有不明白的可以留言.

JS实现秒杀定时器动画效果

猜你喜欢