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);    
        },

    附截图:

  • 相关阅读:
    (转)python编写登录接口
    (转)Python之文件读写
    (转)python strip()函数 去空格 函数的用法
    (转)模块readline解析
    (转)跟着老男孩一步步学习Shell高级编程实战
    图片服务器优化 解决流量和存储问题
    某大型网站图片服务器改造方案
    雅虎网页优化14条原则
    独立的图片服务器架构
    城市分站设计思路
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12768440.html
Copyright © 2011-2022 走看看