javaweb登录界面,js生成随机验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#center{
width: 16%;
margin: 0 auto;
}
#checkcode{
background-color: rgb(201, 208, 212);
color: blue;
font-size: 30px;
}
#renew{
color: blue;
text-decoration:underline;
cursor:pointer;
}
</style>
</head>
<body>
<div id="center">
<h1 style="text-align: center">用户登录</h1>
<form action="" method="post">
账号:<input type="text" name="name"><br><br>
密码:<input type="password" name="password"><br><br>
验证码:<input type="text" id="inputcode"><br><br>
<span id="checkcode">123456</span>
<a id="renew">看不清,换一张</a><br><br>
<button id="check">确定</button>
<input type="reset" value="重置">
<script>
//加载时生成验证码
window.onload=function(){//打开网页,立刻执行函数
var res=getcode();
function getcode(){
var str='';
for(var i=0;i<6;i++){
var num=Math.round(Math.random()*9);
str +=num;
}
return str;
}
document.getElementById('checkcode').innerText=res;
//点击生成验证码
document.getElementById('renew').onclick=function(){
document.getElementById('checkcode').innerText=getcode();
}
//点击确定检验验证码
document.getElementById('check').onclick=function(){
var code=document.getElementById('checkcode').innerText;
var inputcode=document.getElementById('inputcode').value;
if(code != inputcode){
window.alert("您输入的验证码不正确");
document.getElementById('inputcode').value=''
document.getElementById('checkcode').innerText=getcode();
return false;
}
}
}
</script>
</form>
</div>
</body>
</html>