Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue封装手机验证码

vue封装手机验证码

作者头像
马克社区
发布于 2022-05-10 10:08:56
发布于 2022-05-10 10:08:56
3.2K00
代码可运行
举报
文章被收录于专栏:高端IT高端IT
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 获取验证码
 let endMsRes = new Date().getTime() + 45000;
 localStorage.setItem(“myEndTime”, JSON.stringify(endMsRes));
 this.codeCountDown(endMsRes);
// 存储验证码时隔
 codeCountDown(endMsRes) {
 this.BtnStatus = false;
 this.countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000);
 let time = setTimeout(() => {
 this.countDownTime–;
 if (this.countDownTime < 1) {
 this.BtnStatus = true;
 this.countDownTime = 45;
 localStorage.removeItem(“myEndTime”);
 clearTimeout(time);
 } else {
 this.codeCountDown(endMsRes);
 }
 }, 1000);
 },

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118755557

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue回炉重造之封装防刷新考试倒计时组件
<!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2}}:{{timerCount1}}</p> <button @click="reset">重新计时</button> </div> </template> <script> export default { name: “Time”, data() { return { timeSeconds: 0, timeMinutes: 0, seco
马克社区
2022/05/18
6590
Vue回炉重造之三次封装axios
import axios from ‘axios’ // 引入axios import store from ‘…/store/index’ // 引入Vuex import router from ‘…/router’ // 引入vue-router import { Message } from ‘element-ui’ //局部引入UI框架组件 // 环境的切换 if (process.env.NODE_ENV === ‘development’) { axios.defaults.baseURL = ‘https://xxx/’ // 开发环境 } else if (process.env.NODE_ENV === ‘debug’) { axios.defaults.baseURL = ‘’ // 调试环境 } else if (process.env.NODE_ENV === ‘production’) { axios.defaults.baseURL = ‘https://xxx/’ // 生产环境 } axios.defaults.timeout = 10000; // 请求拦截器 axios.interceptors.request.use( config => { if (localStorage.getItem(‘Authorization’)) { config.headers.Authorization = Bearer + " " + localStorage.getItem(‘Authorization’); //查看是否存在token return config; } else if (config.isUpload) { config.headers = { ‘Content-Type’: ‘multipart/form-data’} // 根据参数是否启用form-data方式 return config; } else { config.headers = { ‘Content-Type’: ‘application/json’ } return config; } }, error => { return Promise.error(error) })
马克社区
2022/05/17
2840
关于个人项目(臻美MV【仿抖音App】)滑动切换视频的分析(前端角度)
我们知道你天天刷抖音的时候可以上滑切换视频,互不影响。那么我们站在前端的角度能否可以实现这种效果呢? 这是我的个人项目:臻美MV
马克社区
2022/05/03
3580
你会做一个js获取验证码吗?
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120074372
马克社区
2022/07/18
5360
[javascript] 使用localStorge模拟实现cookie
跨iframe页面,setCookie不起作用,所以迫使我使用localStorge模拟实现。
唯一Chat
2022/05/11
3780
前端常用的 59 个工具类【持续更新】
前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来;
火狼1
2019/12/03
9280
前端常用的 59 个工具类【持续更新】
前端常用utils工具方法小总结
用户6297767
2023/11/21
2620
一文总结JavaScript手写面试题
该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行. 因为 Promise 的状态只能改变一次, 那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可.
helloworld1024
2022/11/07
3840
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
1030
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
tauri学习(2)-a链接伪类visited失效问题
接上节继续,在前端开发中,a链接常用a:visited伪类,用于区分链接点击过后的呈现效果。
菩提树下的杨过
2022/08/23
5910
tauri学习(2)-a链接伪类visited失效问题
浏览器缓存
原文链接:https://note.noxussj.top/?source=cloudtencent 浏览器缓存主要包含 cookie、 在 HTML5 新标准中新增了本地存储 localStorag
菜园前端
2023/05/26
5210
百度前端一面常见手写面试题(持续更新中)
方法有很多种,这里提供一种比较简洁的写法,用到了ES10的Object.fromEntries():
helloworld1024
2022/09/24
4270
js项目中常用的一些工具函数
记录一下在项目中常用的工具函数,随时更新 var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // window.location.search 获取url问号后面部分 v
别盯着我的名字看
2022/06/09
6050
vue 刷新保存数据_vuex数据何时清除
在项目中我们通常会遇到这样一个情况,客户不允许把信息存储在 sessionStorage / localStorage 因为这样会暴露一些存储信息,安全起见只能存储在 vuex 里面,但是 vuex 刷新之后 state 里面的信息依旧会被清除,我们的思路是刷新之前把所有的数据存储在 localStorage 里面,刷新后取出里面的数据,并清除 local/session 里面的记录,这种全局的我们可以放在 app.vue 里面,下面是代码实现
全栈程序员站长
2022/11/19
1.5K0
js手写面试题总结
使用时间戳的节流函数会在第一次触发事件时立即执行,以后每过 wait 秒之后才执行一次,并且最后一次触发事件不会被执行
helloworld1024
2022/12/16
6480
localStorage简单封装设置失效时间
localStorage和cookie 的区别不详细对比,但是localStorage存储数据的时候有一点需要我们注意的。
日薪月亿
2019/05/14
2K0
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
7340
浏览器常见面试题及答案实操续篇之深度解析与典型题型汇总
图片懒加载是前端性能优化的重要手段,以下是一个基于Intersection Observer API的懒加载组件封装实现:
小焱
2025/06/16
970
浏览器常见面试题及答案实操续篇之深度解析与典型题型汇总
运用惰性删除和定时删除实现可过期的localStorage缓存
使用localStorage可以在浏览器中存储键值对的数据。经常被和localStorage一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数据。但是它们之间的区别是:存储在localStorage的数据可以长期保留;而当页面会话结束(也就是当页面被关闭)时,存储在sessionStorage的数据会被清除。
万猫学社
2022/04/22
1.4K0
这些 JavaScript函数让你的工作更加 So Easy!
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
前端小智@大迁世界
2021/03/05
5330
这些 JavaScript函数让你的工作更加 So Easy!
推荐阅读
相关推荐
Vue回炉重造之封装防刷新考试倒计时组件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验