vue实现多个倒计时同步刷新

使用场景:

一般多个定时器同时使用的场景主要应用在限时活动或者限时抢购商品等,如一个页面存在多个商品,且每个商品都有独立的限时抢购时间,因此就会遇到多个定时器同步刷新倒计时

vue实现多个倒计时同步刷新插图
限时抢购使用场景
这次就用简单数据来模拟多个定时器同步刷新实现效果,效果不同原理一样
vue实现多个倒计时同步刷新插图(1)
模拟效果
html

  • 节日名称:{{item.name}} 节日时间:{{item.time}} 剩余时间:{{item.residueTime}}
js
var timeId
export default {
  name: '',
  data () {
    return {
      timelists: []
    }
  },
  created () { // 实例被创建之后执行代码
    this.getTimeList()
  },
  beforeDestroy () {  //组件的销毁
    clearInterval(timeId) // 清除定时器
    timeId=null
  },
  methods: {
    //获取各节日时间
    getTimeList () {
      let timeArr = [{   //模拟数据   届时即为后端请求接口获取
        name: '元旦  ', time: '2020-01-01 00:00:00', residueTime: '' }, {
        name: '新年  ', time: '2020-01-25 00:00:00', residueTime: '' }, {
        name: '元宵节', time: '2020-02-08 00:00:00', residueTime: '' }]
      this.timeLists = timeArr
      this.setIntervalTime()    // 调取倒计时
    },
    // 设置定时器做倒计时
    setIntervalTime () {
      timeId = setInterval(() => {
        this.timeLists.forEach(item => {
          item.residueTime = this.getResidueTime(item.time)
        })
      }, 1000)
    },
    // 获取剩余时间
    getResidueTime (end) {
      let nowtime = new Date().getTime(); // 当前时间 毫秒数
      let endTime = Date.parse(new Date(end.replace(/-/g, "/"))); //结束时间  毫秒数
      let totalSeconds = (endTime - nowtime) / 1000; // 结束时间-当前时间 = 剩余多少时间
      let day = parseInt(totalSeconds / 3600 / 24); //天
      let hour = parseInt((totalSeconds / 3600) % 24); //时
      let minute = parseInt((totalSeconds / 60) % 60); //分
      let second = parseInt(totalSeconds % 60); //秒
      let residueTime ="倒计时:" + day + "天 " + hour + "时 " + minute + "分 " + second + "秒";
      hour = this.addZero(hour)
      minute = this.addZero(minute)
      second = this.addZero(second)
      if (totalSeconds 
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue实现多个倒计时同步刷新

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活