<!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>
.login {
width: 236px;
height: 90px;
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid blue;
border-radius: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.input {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
margin-top: 10px;
}
.input input {
border: 0;
outline: none;
}
.input div {
width: 36px;
height: 19px;
margin-left: 6px;
padding: 0 5px;
background-color: pink;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="login">
<span>验证码登录</span>
<div class="input">
<input id="txt" type="text" name="" placeholder="请输入验证码" />
<div id="code">1d1s</div>
</div>
<div class="button">
<button id="btn">登录</button>
</div>
</div>
<script>
var code = document.getElementById("code");
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
// 生成验证码的函数
function coderandom(codelen) {
var str = "abcdef1234567890";
var strcode = "";
for (var i = 0; i < codelen; i++) {
var n = Math.floor(Math.random() * str.length);
strcode+=str[n]
}
code.innerText=strcode
}
coderandom(4);
// 点击验证码 切换验证码
code.onclick = function () {
coderandom(4);
};
// 点击登录 进行判断
btn.onclick=function(){
if(txt.value===code.innerText){
alert("验证码正确")
location.href="https://blog.csdn.net/weixin_62765236?type=blog"
}else{
alert("验证码不正确")
}
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/126768.html