<!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>
#code {
width: 80px;
height: 30px;
border: 1px solid #000;
line-height: 30px;
font-size: 16px;
text-align: center
}
#rand {
margin-top: 10px;
width: 200px;
height: 30px;
border: 1px solid #ccc;
text-align: center;
line-height: 30px;
color: aqua
}
</style>
</head>
<body>
<div id="code">sdfsdfsdf</div>
<div id="rand">看不清楚?再换一张</div>
<script>
var code = document.getElementById("code"),
rand = document.getElementById("rand");
function queryCode() {
var str = "dasfasldfhakjsdfhasdf"+"asdfasdfasdf"+"45646545646456456" // 数字
var result = "";
for(var i=0;i<4;i++) { // 循环四次
var n = Math.round(Math.random()*50), // 四次的索引
char = str.charAt(n) //把对应的索引转成字符串
result+=char // 拼接到一起
console.log(n,char);
}
return result;
}
code.innerHTML = queryCode()
rand.onclick = function () {
code.innerHTML = queryCode()
}
</script>
</body>
</html>
