!<!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 {
margin: 20px auto 0;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid pink;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="code" id="codeTitle"></div>
<script>
function createCode(n) {
n = n || 4
var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
var len = str.length
var codeStr = ''
while (codeStr.length < n) {
var ind = Math.round(Math.random() * (len - 1))
var char = str[ind]
// 避免验证码中 出现重复的字符
// 如果在codeStr中还没有这个字符时 我们再拼接
if (codeStr.indexOf(char) === -1) {
codeStr += char
}
}
codeTitle.innerHTML = codeStr
}
createCode()
codeTitle.onclick = function () {
createCode()
}
</script>
</body>
</html>
复制代码