技术标签： vue
源：https://www.cnblogs.com/HDou/p/5553424.html
现在很多页面是需要获取验证码的，但是相信很多页面是没有做这样的优化的，比如下面这个场景：
现在访问一个注册页面，页面有一个填写手机号，获取验证码的按钮，点击获取验证码按钮之后，按钮变成灰色，然后是60倒计时效果。在60S内我无法再次点击获取验证码按钮。因为按钮是灰色的，不可点击状态。
但是，如果在倒计时进行时我刷新一下页面，一般的页面就会全部刷新，包括倒计时效果也没有了，按钮恢复到最初可点击状态，这其实是不符合逻辑的。按正常逻辑是，页面仍然倒计时，如果我刷新页面，倒计时依然存在，并且按钮不可点击。
再有一种场景：如果在倒计时任然进行时，我关闭了页面，然后在60S内重新打开页面，按道理说60s时间还没有过完，我重新打开页面，倒计时效果应该依然存在，并且与实际流逝时间对应，也就是说，我点击按钮，倒计时进行到50s的时候，我关闭页面，然后过去40s之后我重新打开页面，倒计时效果应该进行至10s。
但是，现有很多页面是没有实现这样的逻辑的。也就是说页面刷新，倒计时就没有了，按钮又恢复了，自然是不合理不符合逻辑的，针对这样的问题我的解决方案如下。
1.点击获取验证码按钮，改变按钮为不可点击状态，进行倒计时计时器，并且实时记录倒计时秒数，以及当前时间time1。
2.页面刷新的时候监听倒计时按钮，获取倒计时秒数，以及页面关闭的时的时间time1，和当前时间time2。
3.如果当前时间与关闭页面的时间的差 小于关闭页面的倒计时秒数，倒计时任然再进行，修改按钮为倒计时样式。
<input class="phone" type="number" placeholder="验证码" v-model="loginForm.verification">
<button class="close_tel" v-show="show" @click="getCode">获取验证码</button>
<button class="close_tel2" v-show="!show">重新获取({
{count}}s)</button>
const TIME_COUNT = 30
if (!this.timer) { // timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval
this.count = TIME_COUNT
this.show = false
this.checkTel()
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--
} else {
this.show = true
clearInterval(this.timer)
this.timer = null
}
}, 1000)
文章浏览阅读727次，点赞20次，收藏18次。在游戏开发中，有限状态机（Finite State Machine，FSM）是一种强大的设计模式，用于描述对象在不同状态下的行为以及状态之间的转换，对于有限的状态，每个状态有自己独立的实现逻辑和过渡逻辑，每个状态可以切换至零-多个状态。通过描述对象在不同状态下的行为以及状态之间的转换，为游戏开发者提供了一种清晰而有效的方式来管理复杂的游戏逻辑。有限状态机是一种数学模型，用于描述一个系统在不同状态之间的转换。在游戏开发中，这个系统可以是任何具有多种行为的实体，比如角色、敌人、NPC等。
文章浏览阅读685次，点赞26次，收藏14次。随着社会经济的快速发展，人们对足球俱乐部的需求日益增加，加快了足球健身俱乐部的发展，足球俱乐部管理工作日益繁忙，传统的管理方式已经无法满足足球俱乐部管理需求，因此，为了提高足球俱乐部管理效率，足球俱乐部管理后台系统应运而生。本文重点阐述了足球青训俱乐部管理后台系统的开发过程，以实际运用为开发背景，基于框架，运用了Java技术和MYSQL数据库进行开发设计，充分保证系统的安全性和稳定性。
文章浏览阅读1.3k次。controller层，用@Tag注解描述这个controller类的具体功能，然后@Operation注解描述某个方法的具体功能，@Parameters用来记录方法中需要的参数，每个参数的含义。启动项目，访问http://localhost:8080/documentation/swagger-ui/index.html。我们配置Security的配置类，来解除对接口文档访问的拦截。在dto类里面，使用schema来描述类的信息和类的属性。重启项目，然后重新访问接口文档，发现被拦截了。_io.swagger.v3.oas.annotations.media.schema
文章浏览阅读80次。【代码】发布订阅模式的代码实现。_发布订阅源码
文章浏览阅读731次。刚入门数据结构，尝试一下自己写一个链表_c++创建链表
文章浏览阅读665次。在[22-F.1：Condition的简单使用]中介绍了Condition的简单使用及常用方法，Condition在JDK 1.5引入与ReentrantLock结合使用可以对线程进行主动控制，相较于Object的wait(),notify()方法,Condition具有更全面的功能。_reentrantlock newcondition
文章浏览阅读331次。3.1 基于模糊熵的区间直觉模糊VIKOR方法3.1.1 问题描述 设某多属性决策问题有mmm个方案Yi(i=1,2,⋯ ,m)Y_{i}\left(i=1,2,\cdots,m\right)Yi(i=1,2,⋯,m)，组成方案集Y=(Y1,Y2,⋯ ,Ym)Y=\left(Y_{1},Y_{2},\cdots,Y_{m}\right)Y=(Y1,Y2,⋯,Ym)，评价每个方案的属性（或指标）为Gj(j=1,2,⋯ ,n)G_{j}\left(j=1,2,\cdots,n\right)Gj(_模糊vikor
文章浏览阅读547次。信息技术应用创新领域“IT服务工程师”和“IT服务项目经理”是依据现行标准，结合当前我国信息技术应用创新（以下简称“信创”）领域的发展方向及人员技能需求，中国电子技术标准化研究院推出ITSS系列：由中国电子技术标准化研究院软件应用与服务研究中心组织开展ITSS系列 信息技术应用创新领域培训。现相关内容如下：一、ITSS系列培训的价值ITSS能提高企事业单位的IT服务管理水平，规范IT服务的行为，降低IT运营的风险，提升个人及单位在信创领域的业务水平和服务能力。通过培训，可以：l 培养从业人员_itss认证 项目经理与应用经理
文章浏览阅读3.3w次，点赞4次，收藏7次。阿里云最新maven仓库地址:https://maven.aliyun.com/mvn/view<mirror><id>AliRepo-aliyun</id><mirrorOf>*</mirrorOf><name>Mirror Name for the Alirepo.</name><u_阿里云仓库
文章浏览阅读1.8k次。解决办法：1.当然你可以简单直接的在后端把Date类型转成String，非常的简单粗暴2.这是由于SpringBoot中对于@RestController或者@Controller+@ResponseBody注解接口默认返回的是Json数据，而SpringBoot默认的是Jackson框架转换，而Jackson默认的时间时区是GMT，对于中国时间少8个小时所以，我们可以在ap..._springboot返回的数据总是少8
文章浏览阅读1.3w次。在使用Android Studio进行USB调试的时候，出现如下错误：Session 'app': Installation did not succeed. The application could not be installed: INSTALL_FAILED_USER_RESTRICTED这种情况一般是由于被调试手机拒绝安装app的请求。解决方法我是用的手机系统是MIU..._the application could not be installed: install_failed_user_restricted
文章浏览阅读1.9k次。批量提取多个S参数文件的相同分量_matlab读取s2p