vue商品秒杀倒计时

今天做项目需要倒计时

具体代码如下:

showTimes(val) {
			let that = this;
			let interval = setInterval(() => {
				let nowTime = new Date().getTime();
				let startDate = that.obj.endTime;
				startDate = startDate.replace(new RegExp('-', 'gm'), '/');
				let startDateM = new Date(startDate).getTime(); //得到毫秒数
				let lefttime = startDateM - nowTime;
				if (lefttime > 0) {
					that.showTime.H = Math.floor(lefttime / (1000 * 60 * 60)) < 10 ? '0' + Math.floor(lefttime / (1000 * 60 * 60)) : Math.floor(lefttime / (1000 * 60 * 60)); //计算小时数
					that.showTime.M = Math.floor((lefttime / (1000 * 60)) % 60) < 10 ? '0' + Math.floor((lefttime / (1000 * 60)) % 60) : Math.floor((lefttime / (1000 * 60)) % 60); //计算分钟数
					that.showTime.S = Math.floor((lefttime / 1000) % 60) < 10 ? '0' + Math.floor((lefttime / 1000) % 60) : Math.floor((lefttime / 1000) % 60); //计算秒数
				} else {
					that.showTime.H = '00';
					that.showTime.M = '00';
					that.showTime.S = '00';
					clearInterval(interval);
				}
			}, 1000);
		},
data() {
		return {
			obj: {}, //活动详情
			showTime: {
				H: 0,
				M: 0,
				S: 0
			}, //倒计时
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue商品秒杀倒计时的实现步骤与纯JavaScript类似,主要是在Vue组件中使用数据绑定和计算属性来更新倒计时。下面是一个简单的Vue组件实现示例: ```html <template> <div> <div v-if="isOver">秒杀已结束!</div> <div v-else> 距离秒杀结束还有: <span>{{ hours }}</span>小时 <span>{{ minutes }}</span>分 <span>{{ seconds }}</span>秒 </div> </div> </template> <script> export default { data() { return { endTime: new Date(2021, 7, 1, 23, 59, 59) // 秒杀结束时间 }; }, computed: { isOver() { return this.endTime <= new Date(); // 判断秒杀是否已经结束 }, countdown() { var diff = Math.floor((this.endTime - new Date()) / 1000); // 计算时间差 var hours = Math.floor(diff / (60 * 60)); // 计算小时数 var minutes = Math.floor((diff % (60 * 60)) / 60); // 计算分钟数 var seconds = diff % 60; // 计算秒数 return { hours, minutes, seconds }; // 返回时、分、秒的对象 }, hours() { return this.addZero(this.countdown.hours); // 补零处理 }, minutes() { return this.addZero(this.countdown.minutes); // 补零处理 }, seconds() { return this.addZero(this.countdown.seconds); // 补零处理 } }, methods: { addZero(num) { return num < 10 ? "0" + num : num; // 补零函数 } } }; </script> ``` 在上面的示例代码中,计算属性`isOver`用于判断秒杀是否已经结束,计算属性`countdown`用于计算时、分、秒的值,并返回一个包含时、分、秒的对象。然后,通过计算属性`hours`、`minutes`、`seconds`将时、分、秒的值补零处理后显示在页面上。最后,使用`setInterval`定时器每隔一秒更新一次倒计时
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值