前端——获取手机验证码案例

效果

实现间隔规定秒数允许获取短信（如每隔60s可以点击一次获取验证码按钮）
代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>手机号码： <input maxlength="11"> <button>获取验证码</button><script>// 按钮点击之后，会禁用 disabled 为true // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改// 里面秒数是有变化的，因此需要用到定时器// 定义一个变量，在定时器里面，不断递减// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态var btn = document.querySelector('button');var time = 60; // 定义剩下的秒数btn.addEventListener('click', function () {btn.disabled = true;var timer = setInterval(function () {if (time == 0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled = false;btn.innerHTML = '获取验证码';time = 60;} else {btn.innerHTML = time + '秒后重新获取';time--;}}, 1000)})</script>
</body></html>

前端——获取手机验证码案例相关推荐

一个简单的前端获取手机验证码实现
//获取验证码 var wait = 30; var send = true; function getCaptcha(o) { if (0 == wait) { o.removeAttribute( ...
获取手机验证码——Vant表单验证/后端框架express/前后端交互
完成一个获取手机验证码的功能,在获取之前要对手机号进行表单验证,判断是否输入/输入的是否为正确格式,获取手机验证码后可等待n秒重新获取,代码如下: <template><div cl ...
获取手机验证码按钮的效果实现
在web网页中,用户的一些行为,例如注册,登录,付款,修改密码等,都需要网站通过手机验证码来确认其行为身份,从而保证用户账户和网站自身的安全. 一.简介网页中的验证码一般都是采用点击获取的方式,在实 ...
微信小程序获取手机验证码
一种比较常见的功能获取手机验证码先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题直接上代码吧: <view class='changeInfo'> ...
小程序获取手机验证码
<view class="container"><view class="phone"><view class="bir ...
android获取手机验证码界面以及倒计时实现demo，移动端应用开发试题
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', ...
vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...
android 自动获取手机验证码
真的很奇怪大家的复制粘贴功能,一篇自动获取手机验证码的文章各大平台争相转发,我以为很牛逼,到后来发现不能用,可能我技术不够吧,复制粘贴还不到家. android 自动获取手机验证码好处 :① 用户不用 ...
获取手机验证码获取普通验证码
HTML <body><div class="wraper"><h1>获取手机验证码</h1><input id=" ...

前端——获取手机验证码案例

前端——获取手机验证码案例相关推荐

最新文章

热门文章