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