js随机生成验证码以及随机颜色

时间 2019-12-09

原文原文链接

Javascript经过Math.random()随机生成验证码。javascript

代码以下：html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机验证码</title>
<style>
.p1{
width:100px;
height:30px;
border:1px solid black;
}
</style>
</head>java

//onload页面加载完成后当即触发函数
<body onload="sj()">
<input class="p1">
<p style="font-size:30px;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</input>数组

//经过onlick（点击事件）触发函数
<button style="width:80px;height:30px;" onclick="sj()">换一波</button>dom

//引入js外部文件（封装函数）
<script type="text/javascript" src="../js/sj_fzhs.js"></script>
<script type="text/javascript">
//定义随机字符串
var array="1234567890ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwsyz";函数

//获取到span标签
var span=document.getElementsByTagName('span');spa

//定义一个函数
function sj(){
var code="";code

//进行for循环
for(var i=0;i<=6;i++){htm

//首先随机数组的长度
var zm=parseInt(Math.random()*array.length);blog

//而后取出随机数组中的真正的值

code=array[zm];

//将上面取到的<span>元素经过innerHTML赋值给code
span[i].innerHTML=code;

//最后随机出的值经过style.color赋予随机颜色,这里我用到了一个封装函数randomColor()

span[i].style.color=randomColor();
}
}
</script>

</body>
</html>

//封装函数（随机颜色）

function randomColor(){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var rgb="rgb("+r+","+g+","+b+")";
return rgb;
}

//效果图以下：