在vue中制作倒计时功能

最新推荐文章于 2023-03-14 11:56:42 发布

奥皮

最新推荐文章于 2023-03-14 11:56:42 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端vue倒计时文章标签：倒计时 vue 定时器递归

本文链接：https://blog.youkuaiyun.com/axIsMyName/article/details/99290109

前端vue倒计时专栏收录该内容

0 篇文章

订阅专栏

在vue中制作简单的倒计时

倒计时的核心是通过递归来时实现定时器所以在方法中使用setTimeout 就行了

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<body>
	<div id="app">
		<div class="timeruning">{{day}}天{{hr}}:{{min}}:{{sec}}</div>
	</div>
</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			day: 0,
			hr: 0,
			min: 0,
			sec: 0
		},
		mounted: function () {
			this.countdown()
		},
		methods: {
			countdown: function () {
				// 定义结束时间戳
				const end = Date.parse(new Date('2019-8-12 10:10:10'))
				// 定义当前时间戳
				const now = Date.parse(new Date())
				// 做判断当倒计时结束时都为0
				if (now >= end) {
					this.day = 0
					this.hr = 0
					this.min = 0
					this.sec = 0
					return
				}
				// 用结束时间减去当前时间获得倒计时时间戳
				const msec = end - now
				let day = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
				let hr = parseInt(msec / 1000 / 60 / 60 % 24)//算出小时数
				let min = parseInt(msec / 1000 / 60 % 60)//算出分钟数
				let sec = parseInt(msec / 1000 % 60)//算出秒数
				//给数据赋值
				this.day = day
				this.hr = hr > 9 ? hr : '0' + hr
				this.min = min > 9 ? min : '0' + min
				this.sec = sec > 9 ? sec : '0' + sec
				//定义this指向
				const that = this
				// 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
				setTimeout(function () {
					that.countdown()
				}, 1000)
			}
		}

	})
</script>