如何用原生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>
span{
color:red;
font-style: oblique;
font-size: 30px;
}
</style>
</head>
<body>
<p>验证码:<span></span></p>
<input type="text" placeholder="请输入验证码:" >
<button>看不清,点我切换!</button>
<br></br>
<button id="ff">确定</button>
</body>
<script>
//一来就调用生成随机验证码
document.querySelector("span").innerHTML=zhang();
var aa=document.querySelector("p");
var bb=document.querySelector("button");
function zhang(){
var arry1='';
//因为验证码是6位数,所以用循环
for(i=0;i<6;i++)
{
var arry=['0','1','2','3','4','5','6','7','8','9','a','b',
'c','d','e','f'];
var a=Math.round(Math.random()*(15-0)+0);
//拼接
arry1+=arry[a];
}
return arry1;
}
bb.addEventListener("click",function(){
var ma=zhang();
document.querySelector("span").innerHTML=ma;
})
document.getElementById("ff").onclick=function(){
var cc=document.querySelector("input").value;
var ss=document.querySelector("span").innerHTML;
if(cc!=ss)
{
alert("sorry,你的验证码不成功!");
document.querySelector("input").value='';
}
else
{
alert("恭喜你!,你的验证码已经成功!");
document.querySelector("input").value='';
}
}
</script>
</html>