前言

这是一个将验证和倒计时综合起来的案例，案例也不难理解，在页面的设计中，需要这样的代码时可直接套用，仅供参考学习。

验证案例

1.代码

代码如下（示例）：

    <style>#a {position: absolute;left: 260px;border-radius: 15px;width: 150px;height: 25px;background-color: #e4b9b9;text-align: center;}div {position: absolute;left: 260px;top: 35px;border-radius: 15px;width: 100px;height: 24px;background-color: #cccccc;text-align: center;}</style>
</head>
<body>
<label>手机号：<input type="text" maxlength="11">
</label>
<button id="a">获取验证码</button>
<br>
<label>验证码：<input type="text" maxlength="4">
</label> <br>
<label>新密码：<input type="password" placeholder="不少于3位，不超过12位" maxlength="12">
</label> <br>
<button>提交</button>
<div></div>
<script>//获取元素var a = document.querySelectorAll('button')[0];var b = document.querySelectorAll('button')[1];var c = document.querySelectorAll('input')[0];var d = document.querySelectorAll('input')[1];var e = document.querySelectorAll('input')[2];var div = document.querySelector('div');var time = 5;//调用函数ad();//定义验证码函数a.addEventListener('click', function () {a.disabled = true;b.disabled = true;//获取验证码function yzm() {var one = parseInt(Math.random() * 10);var two = parseInt(Math.random() * 10);var three = parseInt(Math.random() * 10);var four = parseInt(Math.random() * 10);div.innerHTML = one + "" + two + "" + three + "" + four;}//调用函数yzm();var timer = setInterval(function () {if (time === 0) {clearInterval(timer);a.disabled = false;b.disabled = false;a.innerText = '获取验证码';} else {a.innerText = '再次验证还剩下' + time + '秒';time--;}}, 1000);time = 5;})//验证是否正确b.addEventListener('click', function () {if (c.value === '' && e.value === '') {alert('请输入手机号和新密码')return}if (c.value.length < 11) {alert('手机号不对哦！')c.value = ''return;}if (e.value.length < 3 || e.value.length > 12) {alert('密码不对哦！')e.value = ''return;}if (d.value.length !== 4) {alert('验证码长度不对哦')return;}if (d.value === div.innerHTML) {alert('恭喜你，验证成功!')} else {alert('验证失败了呢！请重新验证一遍哦！')d.value = '';div.innerHTML = '';}ad();})//按钮禁用及定时器function ad() {a.disabled = true;b.disabled = true;var timer = setInterval(function () {if (time === 0) {clearInterval(timer);a.disabled = false;b.disabled = false;a.innerText = '获取验证码';} else {a.innerText = '再次验证还剩下' + time + '秒';time--;}}, 1000);time = 5;}
</script>
</body>

效果图如下：

2.代码功能解析

1.验证码

2.验证

3.倒计时

总结

这个案例的难点在我的理解中，应该是调用函数的地方，应该如何调用、在哪里调用都是一个值得思考的问题，大家可以改变调用函数的位置去看看效果，加深函数调用的理解，遇到问题可留言或私信我，我会尽力帮大家解决问题。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！

JS实现验证码倒计时验证案例相关推荐

js定时器实现倒计时小案例
开发工具与关键技术: vscode /javascript 撰写时间:2022/8/19 案例介绍倒计时是网页中经常看到的一个小功能,其实也很简单,掌握了js的日期对象就能写出来了,注意获取时分秒的 ...
js生成验证码并验证 .
<html> <head> <title>验证码</title> <style type="text/css"> .co ...
js生成验证码并且验证
<html> <head> <title>验证码</title> <style type="text/css"> #co ...
js 获取验证码倒计时
1 html 部分 <text :disabled="disabled" @click="getCode">{{ btntext }}</te ...
android 验证码短信验证码,Android短信验证码倒计时验证的2种常用方式
前言本文主要介绍的是短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用. 看图计时器说明:这里的及时从10开始,是为了演示的时间不要等太长而修改的. 方法如下 1.第一种方式:Time ...
js获取验证码倒计时60s(超简单)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js获取验证码倒计时效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
利用JS实现短信验证码倒计时案例
本章教程利用JS实现发送短信倒计时案例,这个需求在实际开发过程很常见. 目录一.程序代码二.预览展示一.程序代码 <!DOCTYPE html> <html lang=&quo ...
js定时器以及验证码倒计时案例
定时器 setTimeout()定时器 setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数 <script>//setTimeout 语法规范//1.win ...

JS实现验证码倒计时验证案例