随机验证码
#box {
width: 100px;
height: 40px;
background: #b0b0b0;
text-align: center;
line-height: 40px;
font-size: 30px;
margin: 50px auto;
}
<div id="box">RG8g</div>
var box = document.getElementById('box');
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'A', 'B', 'C', 'D', 'E', 'F', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //0-21
var strr = "qwertyuiopasdfghjklzcvnmQWERTYUIOPASDFGHKLZXCVBNM1234567890";
// 这是一个命名函数：封装一段代码，创建的时候不会运行
function change() {
var str = '';
for (var i = 0; i < 4; i++) {
var index = Math.round(Math.random() * (strr.length - 1));
var fs = Math.round(Math.random() * (30 - 12) + 12);
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
str = str + "<span style='font-size:" + fs + "px;color:rgb(" + r + "," + g + "," + b + ");'>" + strr[index] + "</span>";
//'<span style="color:rgb('+ +','+ +','+ +');font-size:'+ +'px;">'+ strr[index] +'</span>'
}
box.innerHTML = str;
}
//运行函数
change();
box.onclick = function () {
change();
}
效果图
