原生js生成随机验证验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 样式 */
div {
width: 100px;
height: 50px;
background: #ccc;
text-align: center;
}
div span{
font-size: 20px;
line-height: 50px;
color: rgb(200, 90, 100)
}
</style>
<script>
window.onload = function () {
//获取元素
var div = document.getElementsByTagName('div')[0];
var span = div.getElementsByTagName('span');
//封装随机函数
function rand() {
//字符串
var arr = '0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
//字符串分割成数组
var str = arr.split('', 62);
var inner='';
//循环添加标签 并利用随机方法随机取到数组里面的值
for(var i=0;i<4;i++){
var index = Math.floor(Math.random() * str.length);
inner += '<span>'+str[index]+'</span>';
}
//添加到div里面
div.innerHTML=inner;
for(var i=0;i<span.length;i++){
//随机字体大小
span[i].style.fontSize=(Math.random() * (30-20)+20)+'px';
//随机生成颜色
var r=Math.floor(Math.random() * 255);
var g=Math.floor(Math.random() * 255);
var b=Math.floor(Math.random() * 255);
span[i].style.color='rgb('+r+','+g+','+b+')';
}
}
rand();//调用函数
//添加点击事件
div.onclick = function () {
rand();//调用函数
}
}
</script>
</head>
<body>
<div></div>
</body>
</html>