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

作者：算法构造者 | 2024-02-01 18:25:35

踩

html随机生成验证码

效果展示

实现原理

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

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

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

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

代码实现

HTML：

CSS：

* {

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');

// 用来生成随机整数

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54508