vuejs 实现24小时倒计时

golden

DOM结构

1. 
   
2. <div class="SYtime">
   
3.                 剩余
   
4.                 <span class="span">{{hh}}</span>:
   
5.                 <span class="span">{{mm}}</span>:
   
6.                 <span class="span">{{ss}}</span>自动结束
   
7.             </div>
   

复制代码

vue代码结构

1. data(){
   
2. return{
   
3.       hh: '00',
   
4.       mm: '00',
   
5.       ss: '00',
   
6.       flag: false,
   
7. }
   
8. }
   
9. mounted () {
   
10.     let time = setInterval(() => {
    
11.       if (this.flag == true) {
    
12.         clearInterval(time)
    
13.       }
    
14.       this.timeDown()
    
15.     }, 500)
    
16.   },
    
17. methods:{
    
18.   timeDown () {
    
19.       const endTime = new Date(this.beginTime).getTime() + 24 * 60 * 60 * 1000;
    
20.       const nowTime = new Date(this.beginTime);
    
21.       var date = new Date();
    
22.       var now = date.getTime(nowTime);
    
23.       //设置截止时间
    
24.       var endDate = new Date(endTime);
    
25.       var end = endDate.getTime();
    
26.       //时间差
    
27.       var rightTime = end - now;//截止时间减去当前时间
    
28.       if (rightTime > 0) {//判断剩余倒计时时间如果大于0就执行倒计时否则就结束
    
29.         // var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
    
30.         var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
    
31.         var mm = Math.floor((rightTime / 1000 / 60) % 60);
    
32.         var ss = Math.floor((rightTime / 1000) % 60);
    
33.         this.hh = hh;
    
34.         this.mm = mm;
    
35.         this.ss = ss;
    
36.       } else {
    
37.         this.isfail = true;
    
38.       }
    
39.     },
    
40. }

复制代码

rootTian

koi

rootTian 发表于 2019-7-9 16:29

55

辜月十二

可以啊

codercj

6666666666666666666666666666666666666