js简单手机动态认证码
<!DOCTYPE html>
<html>
<head>
<title>认证码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
font: 14px;
}
input{
outline: none;
height: 40px;
}
.txt{
width: 200px;
border:none;
background-color: #fff;
border:1px solid #ccc;
padding:0 10px;
box-sizing:border-box;
}
#code{
width: 100px;
height: 40px;
display: inline-block;
background-color:#000;
color: #fff;
text-align: center;
line-height: 40px;
border:none;
}
#sure{
width: 100px;
height: 40px;
border-radius: 3px;
background-color:#eee;
font-size: 14px;
line-height: 40px;
color: #fff;
background-color: #1a84e7;
margin-top: 10px;
}
</style>
<body style="padding:20px;box-sizing:border-box;" onload="change()">
<form action="success.html" onsubmit="return cheack()">
<input type="text" name="" placeholder="请输入认证码" id="Number" class="txt">
<input type="text" name="" id="code" disabled="disabled" readonly="readonly">
<br>
<input type="submit" value="登录" id="sure" >
</form>
</body>
<script type="text/javascript">
//声明一个变量用于存储生成的验证码
var code ;
document.getElementById("code").onclick=change;
function change(){
var arrays=new Array(
'1','2','3','4','5','6','7','8','9','0',
'a','b','c','d','e','f','g','h','i','j',
'k','l','m','n','o','p','q','r','s','t',
'u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T',
'U','V','W','X','Y','Z'
);
var code = '';
// 随机生成一个四位数的验证码
for(var i=0; i<4; i++){
var t = parseInt(Math.random()*arrays.length);
code += arrays[t];
}
// 将随机生成的验证码给code
document.getElementById('code').value = code;
}
// 表单认证，当填写的验证码正确就提交成功
function cheack(){
var num = document.getElementById('Number').value;
var code = document.getElementById('code').value;
if(num.toLowerCase() == code.toLowerCase()){
return true;
}
alert("error");
return false;
}
</script>
</html>
