html中添加随机验证码,基于JS实现一个随机生成验证码功能

效果展示

实现原理

1. html：一般就是一个div：

2. JS：1)将所有的验证码所用的字符放在一个字符串中

2)在这个字符串的字符个数以内，随机生成索引号

3)根据索引号查找对应字符，拼接成验证码的字符串

代码实现

HTML：

CSS：

* {

margin: 0;

padding: 0;

}

div {

width: 80px;

height: 30px;

font-size: 18px;

line-height: 30px;

text-align: center;

color: #333;

border: 1px solid red;

margin: 100px auto;

cursor: pointer;

}

JavaScript：

var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

var oDiv = document.getElementById('code');

// 用来生成随机整数