Math.random()
js代码:
<script type="text/javascript">
window.onload=function (){
var res = "";
//获取验证码div
var yzm = document.getElementById("yzm");
//获取a链接
var a = document.getElementsByClassName("a")[0];
yanzhengma();
//点击a链接的时候重新生成验证码
a.onclick = function() {
yanzhengma();
}
//获取文本框
var txt = document.getElementsByClassName("txt")[0];
//获取确定按钮
var btn = document.getElementsByClassName("btn")[0];
//点击确定按钮时间
btn.onclick = function() {
//判断输入框是否为空
if(txt.value==""){
alert("请输入验证码");
}else{
//判断输入框内容与随机生成的验证码是否相同
if(res != txt.value) {
alert("验证码输入错误!");
txt.value="";
yanzhengma();
} else {
alert("验证码输入正确");
}
}
}
//封装一个函数
function yanzhengma() {
res = "";
yzm.innerHTML = ""; //每次进来先清空验证码div里的内容
//循环出6位数字
for(i = 0; i < 6; i++) {
var num = Math.floor(Math.random() * 10); //产生随机数0~9
//console.log(num)
//yzm.innerHTML+=num;
var div = document.createElement("div");//创建一个div
//随机数字的颜色
var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
res += num;//将随机产生的数字拼接起来
div.className = "yzminfo";
div.innerHTML = num;
div.style.color = color;
div.style.transform = "rotateZ(" + (Math.random() * 360 - 180) + "deg)"
yzm.appendChild(div);//把创建的div追加给yzmdiv
}
}
}
</script>
css样式:
.div {
width: 500px;
height: 85px;
}
.txt {
height: 60px;
font-size: 28px;
}
.divbg {
float: left;
margin-left: 10px;
}
#yzm {
width: 120px;
height: 50px;
background: #ccc;
}
#wbk {
float: left;
}
a {
margin-top: 3px;
display: block;
font-size: 12px;
}
.yzminfo {
float: left;
width: 20px;
height: 50px;
line-height: 50px;
font-size: x-large;
text-align: center;
}
.btn {
width: 473px;
height: 50px;
}
html代码:
<div class="div">
<div id="wbk">
<input type="text" class="txt" value="" />
</div>
<div class="divbg">
<div id="yzm">
</div>
<a class="a" href="JavaScript:void(0)">看不清楚,点击更换</a>
<!--去掉a链接点击会跳到页面上方的效果-->
</div>
</div>
<div class="btn_div">
<input type="button" class="btn" value="确定" />
</div>