vue倒计时刷新页面不会从头开始的解决方法
开启倒计时，直接保存到vuex中，且存储到本地持久化
// state.js
const runTime = localStorage.getItem('time');
paymentRunTime:runTime
// mutations.js
TimeReduction(state) {
this.timerId = setInterval(() => {
if (state.paymentRunTime === 0) {
state.paymentRunTime = 60;
return clearInterval(this.timerId)
}
state.paymentRunTime -= 1;
localStorage.setItem('time',state.paymentRunTime)
},1000);
},
在需要用到的页面钩子函数调用方法， created（）{ this.$store.commit(TimeReduction) }
知识点扩展：
倒计时实例代码：
<template>
<div class="captcha-row">
<input class="captcha-input" placeholder="输入验证码" auto-focus />
<div v-if="showtime===null" class="captcha-button" @click="send">
获取验证码
</div>
<div v-else class="captcha-button">
{{showtime}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 计时器,注意需要进行销毁
timeCounter: null,
// null 则显示按钮 秒数则显示读秒
showtime: null
}
},
methods: {
// 倒计时显示处理
countDownText(s) {
this.showtime = `${s}s后重新获取`
},
// 倒计时 60秒 不需要很精准
countDown(times) {
const self = this;
// 时间间隔 1秒
const interval = 1000;
let count = 0;
self.timeCounter = setTimeout(countDownStart, interval);
function countDownStart() {
if (self.timeCounter == null) {
return false;
}
count++
self.countDownText(times - count + 1);
if (count > times) {
clearTimeout(self.timeCounter)
self.showtime = null;
} else {
self.timeCounter = setTimeout(countDownStart, interval)
}
}
},
send() {
this.countDown(60);
}
},
}
</script>
以上就是vue倒计时刷新页面不会从头开始的解决方法的详细内容，更多关于vue倒计时刷新页面不会从头开始的资料请关注小牛知识库其它相关文章！
-
本文向大家介绍Vue中用JSON实现刷新界面不影响倒计时，包括了Vue中用JSON实现刷新界面不影响倒计时的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue中用JSON实现刷新界面不影响倒计时的具体代码，供大家参考，具体内容如下 效果展示： 部分代码 重要的代码部分 实现原理 1.首次加载页面 点击开始 1）.获取当前时间戳与要倒计时的时间相加获得要停止计时的时间 2）.用loc
-
本文向大家介绍jQuery实现页面倒计时并刷新效果，包括了jQuery实现页面倒计时并刷新效果的使用技巧和注意事项，需要的朋友参考一下 下面一段代码给大家分享基于jquery实现的页面倒计时并刷新效果，代码如下所示： 以上所示是小编给大家介绍的jQuery实现页面倒计时并刷新效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
-
本文向大家介绍JavaScript实现刷新不重记的倒计时，包括了JavaScript实现刷新不重记的倒计时的使用技巧和注意事项，需要的朋友参考一下 前言 JavaScript倒计时，实现起来不难，但是一刷新往往就重新计算了，如果要实现刷新不重计该如何做呢？ 有这么几种思路， 1：cookie 2：本地缓存 3：window.name …… 前两种比较容易理解，今天我来
-
本文向大家介绍解决Angular2 router.navigate刷新页面的问题，包括了解决Angular2 router.navigate刷新页面的问题的使用技巧和注意事项，需要的朋友参考一下 造成这个问题一般是因为我们在<form>表单中使用<button>时忘记添加type属性，在表单中，如果忘记给按钮添加属性，会默认为submit，如果在子元素中会向上冒泡触发submit 解决方法： 1.
-
本文向大家介绍react-router browserHistory刷新页面404问题解决方法，包括了react-router browserHistory刷新页面404问题解决方法的使用技巧和注意事项，需要的朋友参考一下 使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进行分析并总结解决方案。 背景 使用webpack
-
我制作了一个非常简单的登录和会话结构，以便在未来基于JSP的应用程序中重用。是这样的： 而位于WebContent根目录的login.jsp页面有一个 表单，其中包含用于身份验证的专用innerHTML和一个用于接收会话超时或登录失败消息的${failure}字段。 这个结构对我来说很管用。它拦截、请求登录、检查会话和身份验证，等等，但有一个小缺陷：如果您在登录页面并在超时后刷新它（F5或在URL
-
问题内容： 我有一个文件，其中我在页面顶部显示外部页面（使用iframe），其他部分是写在文件中的html代码的输出。 HTML代码如下所示： 现在，我想以编程方式刷新页面而不刷新。 我的问题是我可以不刷新页面就刷新页面吗？ 答案/提示将不胜感激。 问题答案： 该嵌在主HMTL页面（或在JSP）。因此，如果刷新页面，则肯定会再次加载iframe。 为了避免这种情况，我可以考虑以下两种选择： 使用A
-
本文向大家介绍页面刷新时sessionStroage会变（会清空）吗？相关面试题，主要包含被问及页面刷新时sessionStroage会变（会清空）吗？时的应答技巧和注意事项，需要的朋友参考一下 不会 SessionStroage 是数据页面会话级别的, 当你在打开这个页面的时候会被创建, 并且重新加载或恢复页面仍会保持原来的页面会话... 当你在关闭对应浏览器Tab的时候会被清出