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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
php下保存远程图片到本地的办法
2010/08/08 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
js随机颜色代码的多种实现方式
2013/04/23 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python for循环remove同一个list过程解析
2019/08/14 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
Java的类与C++的类有什么不同
2014/01/18 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
服务标兵事迹材料
2014/05/04 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
教代会闭幕词
2015/01/28 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
python数据处理之Pandas类型转换
2022/04/28 Python