css:
<style>
* { margin: 0; padding: 0;}
.warp { width: 400px;height: 200px;margin: auto;}
.auth-code {width: 150px;height: 30px;border: 3px solid red;text-align: center;line-height: 30px;}
.txt {width: 150px;height: 30px;line-height: 30px;font-size: 20px;}
.gain-data { width: 100px;height: 35px;}
.submit-data { width: 50px;height: 35px;}
</style>
布局:
<div class="warp">
<p class="auth-code">4587</p>
<input type="text" class="txt" placeholder="请输入验证码">
<button class="gain-data">获取验证码</button>
<button class="submit-data">提交</button>
</div>
jquery代码
<script>
//方法1:用数组存储数据// var ma=['12tg','34nm','90ml','32cc','67jj','12tg','34nm','95ml','38cc','69jj']
// setInterval间歇定时器:相隔想用的时间,重复执行
// setTimeout一次性定时器:延时执行只执行一次
var int = null; //暂时存放定时器
var time = 3; //自定义设置事件
$('.gain-data').click(function () {
$('.gain-data').prop('disabled', true) //'disabled',true可以点击
if (int) clearInterval(int); //如果代码在一行if后面可以省略{}
int = setInterval(function () { //开启定时器
time--; //time=10递减
$('.gain-data').text(time); //将time的值赋给按钮
if (time == 0) { //判断time=0时
$('.gain-data').text('再次获取'); //给俺扭赋值
$('.gain-data').prop('disabled', false) //设置点击
clearInterval(int); //清除定时器
time = 3; //直接赋值 //var num = 100 num = 10 console.log(num);num=10
}
}, 1000)
var str = 'mnbvcxzasdfghj0123klpoiuytrewq678MNBVCXZLKJH45GFDSAPOIUYT9REWQ'; //字符串
var len = str.length; //获取字符串长度
var num = 4; //设置生成字符串长度
var code = ''; //接受验证码
for (var i = 0; i < num; i++) {
var rand = Math.round(Math.random() * len - 1);
code += str[rand]
}
// var dd=$(this).index()
// $(this).prev().prev().text( `${ma[dd]}`)
$(this).prev().prev().text(code)
})
$('.submit-data').click(function () {
// var tt=$(this).prev().prev().prev().text();
var tt = $(this).parent().children('.auth-code').text()
var txt = $(this).parent().children('.txt').val();
if (tt == txt) {
alert('尊敬的用户您已验证成功')
} else {
alert('验证失败,请重新输入')
$('.txt').val('')
}
})
</script>