js写一个四位数的随机验证码且颜色随机
<div id="code" onclick="updataCode()"></div> <script> var num = 4; var fontSize = "50px"; function updataCode() { var code = document.getElementById("code"); code.style.borderStyle = "solid"; code.style.borderColor = "#333"; code.style.display = "inline-block"; code.style.cursor = "pointer"; code.style.padding = "10px"; code.innerHTML = getCode(); for (var i = 0; i < num; i++) { var sp = code.getElementsByTagName("span")[i] sp.style.color = getColor(); sp.style.fontSize = fontSize; } } window.onload = updataCode(); // 随机数字 function getCode() { var all = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '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', '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 list = ""; for (var i = 0; i < num; i++) { var word = all[parseInt(Math.random() * all.length)]; list += "<span>" + word + "</span>"; } return list; } // 随机颜色 function getColor() { var color1 = parseInt(Math.random() * 255); var color2 = parseInt(Math.random() * 255); var color3 = parseInt(Math.random() * 255); return "rgb(" + color1 + "," + color2 + "," + color3 + ")"; } </script>
和上面一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#auth_code {
200px;
height: 100px;
border: 1px solid #ccc;
margin: 200px auto 0;
text-align: center;
line-height: 100px;
font-size: 50px;
letter-spacing: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="auth_code" onclick="auth_code()"></div>
<script>
//验证码内需要字符个数
var num = 4;
//点击更换验证码
function auth_code() {
//获取id为box元素
var box = $("auth_code");
//随机改变字符
box.innerHTML = randstr();
//获取box里span元素，并换颜色
for (var i = 0; i < num; i++) {
var span = box.getElementsByTagName("span")[i];
span.style.color = randcolor16();
}
}
//获取元素通过ID-----------函数-----------
function $(IdName) {
return document.getElementById(IdName);
}
//字符随机选取---------------函数------------
function randstr() {
var all = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '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', '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 words = "";
for (var i = 0; i < num; i++) {
var word = all[parseInt(Math.random() * all.length)];
words += "<span>" + word + "</span>";
}
return words;
}
//随机颜色rgb------------函数----------------
function randcolor() {
var color = parseInt(Math.random() * 255);
var color1 = parseInt(Math.random() * 255);
var color2 = parseInt(Math.random() * 255);
return "rgb(" + color + "," + color1 + "," + color2 + ")"
}
//随机颜色十六进制-----------函数----
function randcolor16() {
var color = "#";
var color16num = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (var i = 1; i <= 6; i++) {
color += color16num[parseInt(Math.random() * color16num.length)]
}
return color;
}
window.onload = auth_code();
</script>
</body>
</html>