1.老师例题
<body> <div id="box"></div> <script> //获取验证码的区域 var box = $("box"); //验证码字符个数 var num = 6; var arr = [0,1,2,3,4,5,"a","b","c","A","B","C"]; var words_ = ""; //取每个字符 for(var i=1;i<=num;i++){ //随机取的下标 var index = parseInt(Math.random()*arr.length); var words = "<span>" + arr[index] + "</span>"; words_ += words; } //把循环取出的字符赋给页面容器 box.innerHTML = words_; //获取字符块然后给随机颜色 for(var i=1;i<=num;i++){ document.getElementsByTagName("span")[i-1].style.color = randomColor(); } //取id function $(idName){ return document.getElementById(idName); } //随机颜色值 function randomColor(){ var color_num1 = parseInt(Math.random()*255); var color_num2 = parseInt(Math.random()*255); var color_num3 = parseInt(Math.random()*255); color = "rgb(" + color_num1 + ","+ color_num2 +","+ color_num3 +")"; return color; } </script> </body>
2.自己仿写的
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
800px;
height:500px;
border:1px solid #000;
margin:200px auto;
display:flex;
justify-content:space-between;
}
#box div{
200px;
height:500px;
border-right:1px solid #000;
line-height:500px;
text-align:center;
font-size:100px;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
var box = document.getElementById("box");
for(var i=0;i<4;i++){
var num = box.getElementsByTagName('div')
[i];
num.innerHTML=randnum();
num.style.color=randcolor();
}
function randnum(){
var z = [0,1,2,3,4,5,6,7,8,9,'q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M']
var rands=parseInt(Math.random()*61);
return z[rands];
}
function randcolor(){
var z = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
var res="";
for(var i=1;i<=6;i++){
var id=parseInt(Math.random()*15);
res+=z[id];
}
return "#"+res;
}
console.log(randcolor());
</script>
</body>