js_随即生成多位验证码及变换颜色


css样式:



<style type="text/css">
/*给验证码设一个盒子*/
#yzm{
width: 120px;
height: 50px;
text-align: center;
background: #ccc;
float: left;
}
span{
font-size: 20px;
line-height: 50px;
}
/*按钮*/
button{
width: 100px;
height: 50px;
}
</style>

html代码:


<body onload='yanzhengma()'>
<!--在页面加载时就执行这个函数-->
<div id="yzm">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!--点击事件-->
<button onclick="yanzhengma()">刷新</button>
</body>

 

js代码:

<script type="text/javascript">
//先写出一些需要随机的数字及字母
var shu = ('1234567890qwertyuioplkjhgfdsazxcvbnmQAZWSXEDCRFVTGBYHNUJMIKOLP');
//获取span
var span = document.getElementsByTagName("span");
//定义一个函数为yanzhengma()
function yanzhengma(){
var yzm=" ";
//想要几个循环几个数值
for(i=0;i<4;i++){
//随机Math.random()出的值乘以数组的长度,取出的值为数组的下标
var num = parseInt(Math.random() * shu.length);
//取出shu中的值,利用上面取出的下标num,此时取出的是数组中的值
yzm = shu[num];
//把随机取到的值通过innerHTML在页面上
span[i].innerHTML=yzm;
//把随机出的值通过style.color赋予颜色 ,Color()是自己封装的一个随机颜色函数
span[i].style.color=color();
}
}
</script>

 

颜色封装的代码:


/*封装Color*/
function color(){
var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
return color;
}

 

 

posted @ 2018-01-05 07:59  WY_KID  阅读(983)  评论(3编辑  收藏  举报