方法一:
要求:每次刷新页面,都会输出一个六位数的验证码 (字母和数字组成),且每次 刷新验证码都随机变色
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类名获取创建的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();//调用函数生成验证码
</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">
//定义数组
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();//调用创建验证码函数
mycode.onclick = function(){ //点击验证码,刷新验证码
createCode();
}
function createCode(){ //随机生成验证码函数
str = ""; //每次点击将str的值初始化
for (var i = 0 ; i < 6 ; i++) { //循环遍历数组,随机取四位字符
var num = Math.floor(Math.random()*arr.length);
str = str + arr[num];
}
mycode.innerHTML = str;//将str赋值给innerHTML,将验证码显示到页面上
}
</script>
</body>
</html>