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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
详解VUE Element-UI多级菜单动态渲染的组件
Apr 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
基于php无限分类的深入理解
2013/06/02 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php实现websocket实时消息推送
2018/03/30 PHP
浅谈php://filter的妙用
2019/03/05 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
详解Python中find()方法的使用
2015/05/18 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
《学会待客》教学反思
2014/02/22 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Python  lambda匿名函数和三元运算符
2022/04/19 Python