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;

}

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