美文网首页
拿到结束时间如何计算倒计时

拿到结束时间如何计算倒计时

作者: 勤能补拙的笨小孩 | 来源:发表于2019-09-26 09:40 被阅读0次

因为项目需要做了一个倒计时的小功能,虽然不是多难,但是整理出来以后用的时候更方便。

本次项目为vue项目,js项目同理,只是语法略微不同。

  1. 首先肯定要拿到结束时间:
    this.endTime = res.endTime;

  2. 然后调用倒计时计算函数,以便公用:
    this.suan();

  3. 并且每秒调用一次:
    var timer = setInterval(() =>{ this.suan(); },1000);

  4. 在计算函数内部:

suan(){
    
     this.time = new Date().getTime() / 1000;    // 获取当前时间
     
      this.timeCount.time = (this.endTime - this.time);    // 倒计时计算
     
      if(this.timeCount<0){this.timeCount=0}     //防止倒计时为负
      
      var arr = this.toDay(this.timeCount);    //时间差转换为天、时、分、秒
      
       // 数据更新不重新渲染解决方案
       this.$set(this.timeCount,'t',{
            days: arr[0],                   //拿到toDay返回的数组中对应的数据,赋值给对应属性
            hours: arr[1],
            minutes: arr[2],
            seconds: arr[3]
          })
    }
 // this.timeCount为倒计时对象,下面包含时间差的时间戳、以及转为天时分秒后的数据,至于它为什么是一个对象,是因为在vue内直接改变data中的数据,页面数据不会第一时间更新,所以改为——更改数据的属性

时间戳转为时间段函数

toDay(mss){
    var days = parseInt(mss.time / (1000 * 60 * 60 * 24));
    var hours = parseInt((mss.time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = parseInt((mss.time % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.round((mss.time % (1000 * 60)) / 1000);
    var arr=[days,hours,minutes,seconds];
    return arr;    //用一个数组存储day  hours  min  sec数据,并return
}

附赠时间戳转为时间函数,用于测试获取的时间戳是否正确

toDate(timestamp){
    var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
    return Y+M+D+h+m+s;
}

相关文章

  • 拿到结束时间如何计算倒计时

    因为项目需要做了一个倒计时的小功能,虽然不是多难,但是整理出来以后用的时候更方便。 本次项目为vue项目,js项目...

  • iOS商城类商品抢购倒计时那点事

    一.之前电商项目做过的倒计时功能,笔记一下。主要有两种思路:①:根据当前系统时间和抢购结束时间计算差值,计算倒计时...

  • 倒计时组件(React hook)和单元测试

    目标 如何测试倒计时 实现 倒计时组件 剩余时间展示格式为:x天HH:mm:ss 超过时间,将文案变成已结束 在时...

  • vue倒计时

    根据两个时间戳计算倒计时 定时器

  • vue,页面到计时的问题

    倒计时 ajax请求接口,获取活动开始时间,在页面实现一个定时器效果 牵扯到倒计时的时候, 不要使用计算属性,计算...

  • js中date倒计时

    获取倒计时之前,我们不妨先来看怎样获取当前时间吧!!! 获取倒计时 1、实现倒计时功能2、倒计时结束按钮可被点击,...

  • Android学习笔记4-自定义CountDownTimer

    想要写一个倒计时函数,思路也就是获取系统时间,与倒计时时间数计算来时间倒计。没想到Google官方有CountDo...

  • 实际项目中一些简单时间函数的封装:

    1.计算剩余时间,需求:可用于商品的倒计时等: 举个栗子: 2.计算传入时间过了多久,需求:可用于记录留言的时间(...

  • C++ 实现CountDown倒计时程序

    VC++ 实现一个简单的CountDown倒计时程序,时间到,全场比赛结束!运行倒计时程序后,在窗体中会显示倒计时...

  • ios 两个日期之间的时间差

    计算时间差,其实可以通过计算两个时间戳之间的差值,首先拿到两个时间的数据,比如 @“2016-1.19 10:34...

网友评论

      本文标题:拿到结束时间如何计算倒计时

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