【vue2.x】小白如何快速实现每个月倒计时

简介: 【vue2.x】小白如何快速实现每个月倒计时

代码一

//获取这个月最后一天
    getLastDay(){
        var year = new Date().getFullYear(); //获取年份
        var month = new Date().getMonth() + 1; //获取月份
        var lastDate = new Date(year, month , 0).getDate(); //获取当月最后一日
        month = month < 10 ? '0' + month : month ; //月份补 0
        return [year,month ,lastDate ].join("-")
    },
//打印后 2022-12-6

代码二

//计算倒计时
countDownFn() {
          // 获取当前时间
          var date = new Date();
          var getDay = this.getLastDay()
          var last_mouth = this.getLastDay()+' 24:0:0' //上面我们得到的数据 2022-12-6 24:0:0
          // 获取当月倒计时时间
          var tgt = new Date(last_mouth);
          // console.log(333,tgt,date)
          // 获取时间差
          var distance = (tgt - date);
         //  if (distance <= 0) {
                // // alert("目标时间不能小于当前时间");
                // clearInterval(_time);
                // return;
         //  }
          console.log(distance, "时间差");
          // 计算剩余时间
          var d = Math.floor(distance / (1000 * 60 * 60 * 24));//天
          var h = Math.floor((distance / (1000 * 60 * 60)) % 24);//时
          var m = Math.floor((distance / (1000 * 60)) % 60);//分
          var ms = Math.floor(distance/1000 % 60);//秒
          this.time = {
                  d:d.toString().padStart(2, "0"),
                  h:h.toString().padStart(2, "0"),
                  m:m.toString().padStart(2, "0"),
                  ms:ms.toString().padStart(2,"0")
          }
},

代码三

onShow() {
        this.destroy_time=setInterval(()=>{
                this.countDownFn()      
        },1000)
},

代码四

    destroyed() {
            clearInterval(this.destroy_time);
    },

效果

相关文章
|
6月前
|
JavaScript
使用Vue.js做一个简单的计时器应用,好玩实在哦
使用Vue.js做一个简单的计时器应用,好玩实在哦
|
JavaScript 前端开发 程序员
前端开发:在vue中实现按钮倒计时功能
在vue中开发中,关于计时器的使用也是比较常见的知识点,如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求,很常见的需求也不复杂,主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法,方便查阅使用,如有问题请指正。
1467 0
|
6月前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
存储 JavaScript 前端开发
【三十天精通 Vue 3】 第一天 Vue 3入门指南
【三十天精通 Vue 3】 第一天 Vue 3入门指南
272 1
|
存储 JSON JavaScript
【半小时入门vue】最容易理解的vue入门方式
【半小时入门vue】最容易理解的vue入门方式
|
JavaScript UED
【三十天精通Vue 3】第二十七天 Vue 3的实战案例-接口进度条
【三十天精通Vue 3】第二十七天 Vue 3的实战案例-接口进度条
359 0
|
JavaScript
VUE第三天
VUE第三天
63 0
|
JavaScript
VUE第五天
VUE第五天
55 0
|
JavaScript 前端开发
VUE第二天
VUE第二天
57 0
|
JavaScript
VUE第十六天(一)
VUE第十六天(一)
75 0
下一篇
无影云桌面