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;
}