<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
changeCheckCode();
$("#checkCode").click(function(){
changeCheckCode();
});
});
function changeCheckCode(){
var valueArray=new Array('qwertyuioplkjhgfdsazxcvbnm','QWERTYUIOPLKJHGFDSAZXCVBNM','12345670');
var colorArray=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
var color="#";
var colorArrayLength=colorArray.length;
var value="";
for(var i=0;i<4;i++){
var valueIndex=valueArray[Math.floor(Math.random()*3)];
value=value+valueIndex.substr((Math.floor(Math.random()*(valueIndex.length))),1);
}
console.log("value的值为："+value);
for(var j=0;j<6;j++){
color=color+colorArray[Math.floor(Math.random()*colorArrayLength)];
}
console.log("color的值为："+color);
$("#checkCode").css("background-color",color).text(value);
}
</script>
<style>
#checkCode{
width:80px;
height:40px;
display:table-cell;
text-align:center;
vertical-align:middle;
color:white;
font-size:16px;
font-weight:bold;
opacity:0.5;
letter-spacing:5px;
text-decoration:line-through;
}
</style>
</head>
<body>
<div id="checkCode"></div>
<hr>
</body>
</html>
备注：
Math.round(number) //小数进行四舍五入
Math.floor(number) //舍弃小数位，向下取整
Math.ceil(number) //若存在小数，则进位。向上取整
效果图如下：
