业务场景:
在详情页点击按钮之后,按钮禁用,过3s后按钮才能点击。
我用的vue,大列表点进去的详情页。
1 <el-button" @click="checkBtn" :disabled="checkdisabled">点此检测 </el-button>
2 checkBtn() { //点击事件 3 this.countDown(180); 4 localStorage.setItem(id, Date.now()) //把点击按钮时的时间存到localStorage 5 }, 6 countDown(time) { 7 const timeNum = time //倒计时 8 this.checkdisabled = true //禁用 9 const timer = setInterval(() => { //倒计时 10 this.timeNum-- 11 if (this.timeNum <= 0) { //达到3分钟时停止倒计时 12 clearInterval(timer) 13 this.checkdisabled = false 14 localStorage.removeItem(id) 15 } 16 }, 1000) 17 }, 18 mounted() { 19 const preTime = localStorage.getItem(id) //获取点击按钮时的时间 20 if (!preTime) return 21 const timeNum = parseInt((Date.now() - preTime) / 1000) //当前时间跟点击按钮时候的时间差,并算成s 22 if (timeNum >= 180) { 23 如果这个时间差大于180s, 则证明过了3分钟, 24 localStorage.removeItem(id) 25 } else { //否则,将剩余的时间传进去,继续倒计时 26 this.countDown(180 - timeNum) 27 } 28 } 29 30 需要注意的是, 把时间存localStorage里是为了, 去了别的页面时依然计算倒计时。
最后的落幕: 推荐一下腾讯云的服务器, 搞活动真的很便宜啦, 3 折3折
https: //cloud.tencent.com/redirect.php?redirect=1014&cps_key=0fe886ef07870a50bf9a175e21a71046&from=console
阿里云的对比一下下啦, 虽然2折
https: //promotion.aliyun.com/ntms/act/qwbk.html?userCode=d3wdmq73