vue写一个到当天某一时刻的倒计时器

最新推荐文章于 2023-12-29 16:05:24 发布

D-liang先生

最新推荐文章于 2023-12-29 16:05:24 发布

阅读量235

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45352819/article/details/127618933

版权

    countdown() {
// 获取当前时间
  let date = new Date()
  let now = date.getTime()
  // 设置截止时间
  let endDate = new Date(new Date().toDateString() + ' 16:50')//要倒计时的时间
  let end = endDate.getTime()
  // 时间差
  let leftTime = end - now
  // 定义变量 d,h,m,s保存倒计时的时间
  if (leftTime >= 0) {
    // 时
    let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
    this.hour = h < 10 ? '0' + h : h
    // 分
    let m = Math.floor(leftTime / 1000 / 60 % 60)
    this.min = m < 10 ? '0' + m : m
    // 秒
    let s = Math.floor(leftTime / 1000 % 60)
    this.second = s < 10 ? '0' + s : s
  } else {
    this.hour = '00'
    this.min = '00'
    this.second = '00'
  }
  // 等于0的时候不调用
  if (Number(this.hour) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
    return
  } else {
  // 递归每秒调用countTime方法，显示动态时间效果,
    setTimeout(this.countTime, 1000)
  }
  },
  },

在16:43 - 16:50 时候进行倒计时的显示

	  const A = new Date(new Date().toDateString() + ' 16:43') / 1000 
	  const B = new Date() / 1000 
	  const C = new Date(new Date().toDateString() + ' 16:50') / 1000
	setInterval(() => {
		if(A < B && B < C){
			this.isShowTime = true
			this.countdown()
		} else {
			this.isShowTime = false
		}
	},1000)