方法一:
要求:每次刷新页面,都会输出一个六位数的验证码 (字母和数字组成),且每次 刷新验证码都随机变色
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;
}
html代码:
js代码:
//通过class类名获取创建的div元素
var mycode = document.getElementById("mycode");
function createCode(){ //创建验证码函数
//定义一个数组存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'];
//定义一个数组存数字
var arrNum = ['0','1','2','3','4','5','6','7','8','9'];
//将两个数组合并
var arrCode = arrLetter.concat(arrNum);
//定义一个数组存六位的验证码
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("");//将验证码数组分割成字符串并返回
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();//调用随机色函数
mycode.innerHTML = createCode(); //调用函数生成验证码
}
mycode.innerHTML = createCode();//调用函数生成验证码