zoukankan      html  css  js  c++  java
  • js简单实现倒计时的方法

    1、使用定时器setInterval

    dateHandle(end){
          // 使用定时器,每秒执行获取时间,执行一次函数
          let setInt=setInterval(() => {
            let nowTime=Date.parse(new Date())//现在时间
            let endTime=Date.parse(end)//活动结束时间
            let changeTime=endTime-nowTime;//时间戳差值
            // 所剩天数换算
            let day=parseInt(changeTime/1000/60/60/24)>0?parseInt(changeTime/1000/60/60/24)+'天':''
            // 所剩小时换算,不足10时,前面补0
            let hour=parseInt(changeTime/1000/60/60%24)>9?parseInt(changeTime/1000/60/60%24)+'小时':'0'+parseInt(changeTime/1000/60/60%24)+'小时'
            // 所剩分钟换算,不足10时,前面补0
            let min=parseInt(changeTime/1000/60%60)>9?parseInt(changeTime/1000/60%60)+'分钟':'0'+parseInt(changeTime/1000/60%60)+'分钟'
            // 所剩秒数换算,不足10时,前面补0
            let sec=parseInt(changeTime/1000%60)>9?parseInt(changeTime/1000%60)+'秒':'0'+parseInt(changeTime/1000%60)+'秒'
            if(changeTime<=0){
              // 如果差值小于0,代表活动已结束,清空定时器
              clearInterval(setInt)
              this.time='00天00小时00分钟00秒'
            }else{
              // 如活动未结束,赋值所剩时间
              this.time=day+hour+min+sec;
            }
          }, 1000); 
        },

    附截图:

     2、使用setTimeOut

        // 调用倒计时方法,传入截止日期
        dateHandle(end){
            let nowTime=Date.parse(new Date())//现在时间
            let endTime=Date.parse(end)//截止时间
            let changeTime=endTime-nowTime;//时间戳差值
            if(changeTime<=0){
              // 判断如果差值小于0,直接赋值距截止时间为0,并return
              this.time='00天00小时00分钟00秒';
              return 
            }
            // 所剩天数换算
            let day=parseInt(changeTime/1000/60/60/24)>0?parseInt(changeTime/1000/60/60/24)+'天':''
            // 所剩小时换算,不足10时,前面补0
            let hour=parseInt(changeTime/1000/60/60%24)>9?parseInt(changeTime/1000/60/60%24)+'小时':'0'+parseInt(changeTime/1000/60/60%24)+'小时'
            // 所剩分钟换算,不足10时,前面补0
            let min=parseInt(changeTime/1000/60%60)>9?parseInt(changeTime/1000/60%60)+'分钟':'0'+parseInt(changeTime/1000/60%60)+'分钟'
            // 所剩秒数换算,不足10时,前面补0
            let sec=parseInt(changeTime/1000%60)>9?parseInt(changeTime/1000%60)+'秒':'0'+parseInt(changeTime/1000%60)+'秒'
            console.log(changeTime)
            this.time=day+hour+min+sec;
            // 使用setTimeout每隔1s再次调用一次函数
            let setTime=setTimeout(() => {
              if(changeTime<=0){
                // 判断如果活动结束,清空setTimeout,并return,不再向下执行
                clearTimeout(setTime)
                this.time='00天00小时00分钟00秒';
                return
              }else{
                // 如未结束则继续调用函数,并传入截止时间
                this.dateHandle('2020-4-24 16:40:00')
              }
            }, 1000);    
        },

    附截图:

  • 相关阅读:
    leetcode1161
    leetcode1160
    校招真题练习034 倒水(贝壳)
    校招真题练习033 音乐列表(贝壳)
    校招真题练习032 连续相同字符串(头条)
    校招真题练习031 三支球队比分(头条)
    leetcode1144
    ArrayQueue(队列)
    LinkQueue(链队)
    快速幂
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12768440.html
Copyright © 2011-2022 走看看