vue倒计时刷新页面不会从头开始的解决方法


Posted in Javascript onMarch 03, 2020

开启倒计时,直接保存到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倒计时刷新页面不会从头开始的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 #Javascript
使用vue打包进行云服务器上传的问题
Mar 02 #Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 #Javascript
JS如何生成随机验证码
Mar 02 #Javascript
js实现烟花特效
Mar 02 #Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 #Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 #Javascript
You might like
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
详解JS模块导入导出
2017/12/20 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
浅谈Python 对象内存占用
2016/07/15 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python的range和linspace使用详解
2019/11/27 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
学年自我鉴定
2014/01/16 职场文书
学生会主席竞聘书
2014/03/31 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫