H5页面有多个倒计时的解决办法

最新推荐文章于 2024-03-09 10:00:45 发布

常同學

最新推荐文章于 2024-03-09 10:00:45 发布

阅读量828

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/weixin_43382386/article/details/97496996

H5 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Vue.js的Vue.set()方法实现实时更新的动态时间倒计时功能，通过计算从当前时间到指定时间的时间差，并将结果显示在页面上。每秒更新时间显示，适用于各种倒计时场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里用到了vue中的Vue.set()，实现数据动态响应。具体用法可以参考Vue.set()实现数据动态响应

<body>

		<div id="app" v-cloak>
			<div v-for="item in orders">{{item.time}}</div>
		</div>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var page = new Vue({
			el: "#app",
			data: {
			//这里的数据直接换成你接口获取的
				orders: [{"times":"2019-07-26 23:00:00"},{"times":"2019-07-27 12:22:14"},{"times":"2019-07-27 10:00:56"}]
			},
			created: function() {
				var self = this;
				//这里是在你接口调取成功后 调用time方法
				for(var i = 0; i< self.orders.length; i++){
					self.time(i);
				}
			},
			methods: {
				time: function(i) {
					var self = this;
					var nowDate = new Date();
					var seconds = parseInt((new Date(self.orders[i].times) - nowDate) / 1000);
					if (seconds <= 0) {
						Vue.set(self.orders[i], "time", "00:00:00"); //当时间差小于0
						return;
					}

					var hours = Math.floor(seconds / (60 * 60));
					if (hours < 10) hours = "0" + hours;

					seconds = seconds % (60 * 60);
					var mins = Math.floor(seconds / 60);
					if (mins < 10) mins = "0" + mins;

					seconds = seconds % 60;
					if (seconds < 10) seconds = "0" + seconds;
					Vue.set(self.orders[i], "time", hours + ":" + mins + ":" + seconds);
					//每一秒调用一次
					setInterval(function() {
						self.time(i);
					}, 1000);
				}
			}
		})
	</script>

</body>