<html>
<head lang="en">
<meta charset="UTF-8">
<title>验证码</title>
<style>
input,span,i{
border: dashed 1px red;
height: 20px;
line-height: 20px;
}
span{
display: inline-block;
width:70px;
text-align: center;
letter-spacing: 5px;
background: url("i/yz0.jpg");/*不停替换*/
}
i{
display: inline-block;
width:20em;
}
</style>
</head>
<body>
<input type="text" id="yzm1"/>
<span id="yzm2"></span>
<input type="button" class="yz"/>
<i class="con"></i>
<p>1.span内生成4个随机10以内整数,更换背景.点击span刷新验证码</p>
<p>2.将input数字与1比较</p>
<p>3.相等。验证成功,input内容消失</p>
<p>3.不相等。验证失败,重新验证</p>
<script>
function yzm(){
var one=parseInt(Math.random()*10);
var two=parseInt(Math.random()*10);
var three=parseInt(Math.random()*10);
var four=parseInt(Math.random()*10);
document.getElementById("yzm2").innerHTML =one+""+two+""+three+""+four;
document.getElementById("yzm2").style.background="url(i/yz"+one+".jpg)";
}yzm();document.getElementById("yzm2").onclick=yzm;
function yz() {
var cons=document.getElementsByClassName("con")[0];
var yzm1=document.getElementById("yzm1").value;
var yzm2=document.getElementById("yzm2").innerHTML;
if(yzm1==yzm2){
cons.innerHTML="验证成功";
document.getElementById("yzm1").value=null;
}else{
cons.innerHTML="验证失败,请重新输入验证码";
}
}document.getElementsByClassName("yz")[0].onclick= yz;
</script>
</body>
</html>
JS-验证码
最新推荐文章于 2024-04-30 00:40:04 发布