<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
user-select: none;
text-align: center;
font-size: 50px;
color: black;
width: 150px;
height: 50px;
line-height: 50px;
background: pink;
}
.box {
position: fixed;
height: 200px;
line-height: 200px;
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
</head>
<body>
<div></div>
<input type="text">
<button>提交</button>
<div class="box"></div>
<script>
//获取页面元素
var div = document.querySelector('div');
var box = document.querySelector('.box');
var input = document.querySelector('input');
var btn = document.querySelector('button');
var box = document.querySelector('.box');
//随机函数
function getRandon(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 调用随机函数
div.innerHTML = getRandon(1000, 9999);
// 点击button
btn.onclick = function () {
//if判断是否输入验证码或者输入的是空格
if (input.value.trim() === '') {
alert('请输入正确的验证码');
}
if (input.value === div.innerHTML) {
alert('成功');
} else {
alert('失败');
input.value = ''
div.innerHTML = getRandon(1000, 9999)
}
}
//点击封装验证码的div时让验证码自动更新
div.onclick = function () {
div.innerHTML = getRandon(1000, 9999);
}
var num = 5;
//计时器
var timer = setInterval(function () {
box.innerHTML = num;
num--;
if (num < 0) {
clearInterval(timer)
alert('跳转');
// location.href = 'https://www.baidu.com'
}
}, 1000)
</script>
</body>
</html>
随机四位数的验证码(可以提交,自动更新)
最新推荐文章于 2024-08-18 10:54:05 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)