html中验证码怎么写，前端js+html实现验证码
⽣成六位验证码.png
html布局：
换⼀张
style样式：
.yz{
width: 60%;
height: 50px;
line-height: 50px;
margin: 100px auto;
}
.yz_code{
float: left;
width: 140px;
text-align: center;
height: 100%;
border: 1px solid #000;
margin-right: 20px;
}
button{
margin-top: 24px;
font-size: 16px;
border: none;
background: transparent;
border-bottom: 1px solid blue;
}
js代码
需要⽤到javaScript的math对象，代码如下：
// ⽣成两个数之间的随机数
function rnd(start,end){
return Math.floor(Math.random()*(end-start+1))+start;
html如何下载}
var str ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// ⽣成6位数字验证码
function code(){
var arr = [];
for(var i = 0;i<6;i++){
arr[i] = str.charAt(rnd(0,str.length-1));
}
// 将数组转化为字符串
var res = arr.join("")
$('.yz_code').html(res);
}
/
/ ⾸次进⼊时展⽰的验证码
code();
$('.btn').click(function(event) {
code();
});
另⼀种⽣成验证的⽅式：
// ⽣成验证码的第⼆种⽅法
var arr = [];
var len = 6;
for(var i = 0; i < len; i++){
var num = rnd(48,122); // 58
if ((num>=48&&num<=57)||(num>=65&&num<=90)||(num>=97&&num<=122)){ arr[i] = String.fromCharCode(num);
}else{
// 如果不是有效ascii码，则增加⼀次循环
len++;
}
}
console.log(arr.join(""));
不要忘记给我点赞奥~~~~
image.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。