? 方法一：
? 要求：每次刷新頁面，都會輸出一個六位數(shù)的驗證碼 (字母和數(shù)字組成)萝喘，且每次? 刷新驗證碼都隨機變色
css代碼：
<style type="text/css">
#mycode{
width: 150px;
height: 30px;
line-height: 30px;
font-size: 26px;
font-weight: bold;
text-align: center;
border: 1px solid red;
float: left;
}
#change{
width: 100px;
height: 30px;
cursor: pointer;
background-color: #ADD8E6;
border-style: none;
margin-left: 10px;
float: left;
}
</style>
html代碼：
<div id="mycode"></div>
<button id="change" onclick="downChange()">換一個試試</button>
js代碼：
<script type="text/javascript">
//通過class類名獲取創(chuàng)建的div元素
var mycode = document.getElementById("mycode");
function createCode(){? //創(chuàng)建驗證碼函數(shù)
? ? //定義一個數(shù)組存26個字母
? ? var arrLetter = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
? ? //定義一個數(shù)組存數(shù)字
? ? var arrNum = ['0','1','2','3','4','5','6','7','8','9'];
? ? //將兩個數(shù)組合并
? ? var arrCode = arrLetter.concat(arrNum);
? ? //定義一個數(shù)組存六位的驗證碼
? ? var code = [];
? ? for (var j = 0; j < 5 ; j++) {
? ? ? ? //聲明一個變量存從arrCode取的一個隨機的字符（用下標來找）
? ? ? var randomindex = Math.floor(Math.random()*arrCode.length);
? ? ? ? code[j] = arrCode[randomindex];
? ? ? ? ? ? //再將每一個獲取的元素添加到code中? ? ? ? ? ?
? ? ? ? code.push(code[j]);?
? ? ? }
? ? ? var newCode = code.join("");//將驗證碼數(shù)組分割成字符串并返回
? ? ? ? return newCode;
? }
? ?
? ? function codeColor(){ //每次刷新驗證碼隨機變色
? ? var r = Math.floor(Math.random()*255);
? ? var g = Math.floor(Math.random()*255);
? ? var b = Math.floor(Math.random()*255);
? ? return 'rgb('+r+','+g+','+b+')';
? ? ? ? }
? ?
? ? function downChange(){ //點擊按鈕刷新驗證碼昵慌，直接刷新整個頁面也可刷新驗證碼
? ? mycode.style.color = codeColor();//調(diào)用隨機色函數(shù)? ? ? ?
? ? mycode.innerHTML = createCode();? //調(diào)用函數(shù)生成驗證碼
? ? }
? ? mycode.innerHTML = createCode();//調(diào)用函數(shù)生成驗證碼
</script>
</body>
</html>
方法二：
將驗證碼存進字符串中豺妓，每次點擊驗證碼腕唧，刷新一次
css代碼：
<style type="text/css">
#mycode{
width: 150px;
height: 50px;
line-height: 50px;
font-size: 30px;
font-weight: bold;
text-align: center;
cursor: pointer;
border: 1px solid red;
}
</style>
html代碼：
<div id="mycode"></div>
js代碼：
<script type="text/javascript">
//定義數(shù)組
var arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9'];
? ? var mycode = document.getElementById("mycode"); //獲取元素
? ? var str = "";//定義變量存驗證碼
? ? ?
? ? createCode();//調(diào)用創(chuàng)建驗證碼函數(shù)? ? ?
? ? mycode.onclick = function(){ //點擊驗證碼如暖，刷新驗證碼
? ? createCode();
? ? }
? ? ?
? ? function createCode(){ //隨機生成驗證碼函數(shù)
? ? str = ""; //每次點擊將str的值初始化
? ? for (var i = 0 ; i < 6 ; i++) { //循環(huán)遍歷數(shù)組翎朱，隨機取四位字符
? ? var num = Math.floor(Math.random()*arr.length);
? ? str = str + arr[num];
? ? }
? ? ? ? ? ? ? ? mycode.innerHTML = str;//將str賦值給innerHTML橄维，將驗證碼顯示到頁面上
? ? }? ? ?
</script>
</body>
</html>
?
?
