美文网首页
vue中简单的倒计时功能

vue中简单的倒计时功能

作者: 习惯芥末味 | 来源:发表于2020-02-14 17:51 被阅读0次
<template>
  <div>
    {{time}}
  </div>
</template>

export default {
    name: "LiveDetail",
    data() {
      return {
        startTime: 158157301800,  // 后台返回的时间戳
        time:0, //显示的倒计时
      }
    },

      //开始倒计时
      setstartTime() {
        var that = this;
        var interval = setInterval(function timestampToTime() {
          var date = (that.startTime - Date.now()); //计算剩余的毫秒数
          if (date==0) {
            clearInterval(interval)
          } else {
            const dd = parseInt(date / 1000 / 60 / 60 / 24 , 10);
            var hh = parseInt(date / 1000 / 60 / 60 % 24 , 10);
            if(hh < 10){
              hh = "0" + hh
            }
            var mm = parseInt(date / 1000 / 60 % 60, 10);//计算剩余的分钟
            if(mm < 10){
              mm = "0" + mm
            }
            var ss = parseInt(date / 1000 % 60, 10);//计算剩余的秒数
            if(ss < 10){
              ss = "0" + ss
            }
            return that.time = `${hh}:${mm}:${ss}`
          }
        }, 1000);
      },
    },
}

相关文章

网友评论

      本文标题:vue中简单的倒计时功能

      本文链接:https://www.haomeiwen.com/subject/upjjfhtx.html