不重复的6位随机验证码非常常用，这里是最简单的两种实现方式：（1）自动生成，（2）点击更新。
1、自动生成：每隔1秒自动生成1次。
**html 代码**
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#yard{
font-size: 170px;
background: grey;
}
</style>
<body>
<div id="yard"></div>
</body>
</html>
<script>
var div = document.getElementById("yard");
function fn(){
var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var str = '';
while (str.length < 6) {
var str1 = strCode.charAt(Math.round(Math.random() * 61));
if (str.indexOf(str1) === -1) {
str += str1;
}
}
div.innerHTML=str;
}
fn();
var timer=setInterval(fn,1000)
</script>
```
2、点击更新
**html 代码**
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#yard{
font-size: 170px;
background: grey;
cursor: pointer;/*比“1、自动生成”多出的代码*/
-webkit-user-select:none;/*比“1、自动生成”多出的代码*/
}
</style>
<body>
<div id="yard"></div>
</body>
</html>
<script>
var div = document.getElementById("yard");
div.onclick=fn;
function fn(){
var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var str = '';
while (str.length < 6) {
var str1 = strCode.charAt(Math.round(Math.random() * 61));
if (str.indexOf(str1) === -1) {
str += str1;
}
}
div.innerHTML=str;
}
fn();
</script>
```
106JS原生：10行实现不重复验证码
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10967242.html
今日推荐
周排行