业务场景:
在详情页点击按钮之后,按钮禁用,过3s后按钮才能点击。
我用的vue,大列表点进去的详情页。
<el-button" @click="checkBtn" :disabled="checkdisabled">点此检测 </el-button>
1 checkBtn() { //点击事件 2 this.countDown(180); 3 }, 4 countDown(time) { 5 localStorage.setItem(id, Date.now()) //把点击按钮时的时间存到localStorage 6 const timeNum = time //倒计时 7 this.checkdisabled = true //禁用 8 const timer = setInterval(() => {//倒计时 9 this.timeNum-- 10 if (this.timeNum <= 0) {//达到3分钟时停止倒计时 11 clearInterval(timer) 12 this.checkdisabled = false 13 localStorage.removeItem(id) 14 } 15 }, 1000) 16 }, 17 mounted() { 18 const preTime = localStorage.getItem(id)//获取点击按钮时的时间 19 if (!preTime) return 20 const timeNum = parseInt((Date.now() - preTime) / 1000)//当前时间跟点击按钮时候的时间差,并换算成s 21 if (timeNum >= 180) {如果这个时间差大于180s,则证明过了3分钟, 22 localStorage.removeItem(id) 23 } else {//否则,将剩余的时间传进去,继续倒计时 24 this.countDown(180 - timeNum) 25 } 26 }
需要注意的是,把时间存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