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表格排序组件-tablesorter使用示例
May 26 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php $_SERVER当前完整url的写法
2009/11/12 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
详解JS面向对象编程
2016/01/24 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
简短大学毕业感言
2014/01/18 职场文书
护士岗位职责
2014/02/16 职场文书
党支部换届选举方案
2014/05/08 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
SQL SERVER中的流程控制语句
2022/05/25 SQL Server