倒计时demo

最新推荐文章于 2020-06-24 14:10:42 发布

XM_12345

最新推荐文章于 2020-06-24 14:10:42 发布

阅读量218

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/XM_12345/article/details/82460374

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

截止到某个日期

随便设置一个截止日期：

完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
     <h3 v-if="finalMin < 0">此项挑战任务时间已截止</h3>
     <h3 v-else>
       <label>有效期倒计时</label>
       <span v-for="item in finalHr" :key="item.id">{{item}}</span>:
       <span v-for="item in finalMin" :key="item.id">{{item}}</span>
    </h3>
</div>

<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      intervalId: 0,
      finalHr: 0,
      finalMin: 0,
    }
  },
    created() {
       this.intervalId = setInterval(this.countdown, 1000);
    },
  mounted: function () {
    this.countdown()
  },
  methods: {
    countdown: function () {
      let msec = (new Date('2018.09.10')-Date.now()) / 1000;
      let day =(msec / 60 / 60 / 24) | 0;
      let hr = ((msec / 60 / 60) % 24) | 0;
      let min = ((msec / 60) % 60) | 0;
      //let sec = (msec % 60) | 0;
      this.finalHr = (hr + 24 * day + '').padStart(2,'0');
      this.finalMin = ((((msec / 60) % 60) | 0) + '').padStart(2,'0');
    }
  },
 beforeDestroy() {
   clearInterval(this.intervalId);
  }
})

</script>
<style>
     h3 {
        display: block;
        font-weight: 700;
        text-align: center;
      }
     label {
          float: left;
     }
     span {
       display: inline;
       background: black;
       margin: 0 2px;
       padding: 5px 10px;
       color:#fff;
     }
</style>
</body>
</html>

倒计时60秒

完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="send" :disabled="disabledButton">{{sendMsg == true ? time+'秒后获取':'发送'}}</button>
</div>

<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      time: 60,
      disabledButton: false,
      sendMsg:false
    }
  },
  methods: {
    send: function () {
       this.disabledButton = true;
       this.sendMsg = true;
        let interval = setInterval(() => {
           if ((this.time--) <= 0) {
              this.time = 60;
              this.disabledButton = false;
              this.sendMsg = false;
              clearInterval(interval);
          }
        },1000)
    }
  },
 beforeDestroy() {
   clearInterval(this.intervalId);
  }
})

</script>
<style>
    button {
       width:90px;
       height:32px;
       font-size:15px;
       color:#fff;
       background:#64bd63;
       border:none;
       border-radius: 5px;
       outline:none;
       cursor:pointer;
    }
</style>
</body>
</html>

XM_12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时demo

截止到某个日期随便设置一个截止日期：完整代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;Vue 测试实例 - 菜鸟教程(runoob.com)&lt;/title&gt;&lt;script src="h
复制链接

扫一扫