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');
// 用来生成随机整数
function getRandom(n, m) { // param: (Number, Number)
n = Number(n);
m = Number(m);
// 确保 m 始终大于 n
if (n > m) {
var temp = n;
n = m;
m = temp;
}
// 下有详细说明
return Math.floor(Math.random()*(m - n) + n);
}
// 将随机生成的整数下标对应的字母放入div中
function getCode() {
var str = '';
// 验证码有几位就循环几次
for (var i = 0;i < 4;i ++) {
var ran = getRandom(0, 62);
str += codeStr.charAt(ran);
}
oDiv.innerHTML = str;
}
getCode();// 调用函数,页面刷新也会刷新验证码
// 点击刷新验证码
oDiv.onclick = function(){
getCode();
}
代码分析
JS:
1)将所有的验证码所用的字符放在一个字符串中
-- > 代码第1行,除了字母数字也可放入中文汉字等。
2)在这个字符串的字符个数以内,随机生成索引号
-- > 第4行的函数用于生成随机整数,参数 (n, m)为数字,Number()确保是数字
默认m > n,防止传参有误,用if判断后改正
Math.random() -- > [0,1)
Math.random() * (m - n) -- > [0, m - n)
Math.random() * (m - n) + n -- > [n, m)
为了能将codeStr所有的下标都取到,上述m若是codeStr.length,想要取值能取到最后一位,再使用Math.floor()向下取整。
n 为 0,m 为 codeStr.length 则随机范围为codeStr的所有元素下标。例(n, m) -- > (0, 62)计算后的取值范围:下标为[0, 61]的整数。
3)根据下标查找对应元素,拼接成验证码的字符串
第17行的函数getCode()获取字符串中对应元素,并拼接成字符串返回到页面中。最后点击div可不断生成随机验证码。
完整代码
随机生成验证码
* {
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;
}
var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var oDiv = document.getElementById('code');
// 用来生成随机整数
function getRandom(n, m) { // param: (Number, Number)
n = Number(n);
m = Number(m);
// 确保 m 始终大于 n
if (n > m) {
var temp = n;
n = m;
m = temp;
}
return Math.floor(Math.random()*(m - n) + n);
}
// 将随机生成的整数下标对应的字母放入div中
function getCode() {
var str = '';
// 验证码有几位就循环几次
for (var i = 0;i < 4;i ++) {
var ran = getRandom(0, 62);
str += codeStr.charAt(ran);
}
oDiv.innerHTML = str;
}
getCode();// 调用函数,页面刷新也会刷新验证码
// 点击刷新验证码
oDiv.onclick = function(){
getCode();
}
总结
以上所述是小编给大家介绍的基于JS实现一个随机生成验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
html验证码功能如何实现原理,基于JS实现一个随机生成验证码功能相关推荐
- JS简单实现随机颜色验证码功能
一.实现效果: 二.思路: 1.采用数组存放26位大小写字母以及数字 如果你感觉麻烦,可以采用ACCII码表来循环生成数字与字母结合的随机数 const CodeArr = ['a', 'b', 'c ...
- 基于 js 制作一个倒计时
目录 前言: 项目效果展示: 代码实现思路: 使用方法: 重点功能讲解: 实现代码: 总结: 前言: 很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧! 项目效果展示: 代码 ...
- [js] 使用js实现一个图片剪裁的功能
[js] 使用js实现一个图片剪裁的功能 /** * 裁切图片* @param imgUrl 原始图片路径* @param x,y,width,height 从点[x, y]开始,将宽度width,高 ...
- 随机验证码如何在html里设置颜色,js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: 随机验证码 .p1{ width:100px; height:30px; border:1px solid black; ...
- java验证码画布类型,【Java工具类】使用Kaptcha生成验证码写回页面中
1. 导入依赖 导入kaptcha依赖: com.github.penggle kaptcha 2.3.2 2. 编写配置类: @Configuration public class KaptchaC ...
- 用JS实现一个随机点名系统(五)
用JS实现一个随机点名系统 每次上课前10分钟,老师都会叫我们回答问题,奈何每次都是点学号,好像每次我都能中奖,我直接跟老师提议,老师,我用来JS来帮你写个随机点名的系统吧!这样就不会每次都 抽到我了 ...
- 随机生成验证码及发送短信验证码
验证码 包括过期时间和redis缓存以及校验 1.设置过期时间 private Date getNextDayZeroTime() {Calendar calendar = Calendar.getI ...
- php随机生成验证码,php随机生成数字,php随机生成数字加字母!
<?php /** 方法类* */ class functions {/*** PHP随机生成验证码函数** @param array* @return mixed*/function rand ...
- 原生js完成一个简单的抽奖功能
文章目录 前言 实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖 完整代码 HTML部分 CSS部分 ...
最新文章
- FeResPost 4.1.8 发布
- 配置ANDROID_HOME
- 09-CA/TA编程:storage demo
- adb 查看当前包名和Activity
- win10开启oracle服务器配置,Windows环境(Win10)下安装、配置服务器类Oracle Database 11g Release 2...
- IS-IS(笔记整理)
- python的调试器_玩转Python调试器
- 中国风海报设计模板,东方韵味尽显
- SAP License:MM自动过账科目特殊库存杂谈
- 【Java从0到架构师】Redis 进阶 - 持久化(RBD、AOF)、高可用(主从复制、哨兵机制、Cluster)
- spss 安装包以及许可证
- diy计算机组装注意事项,电脑DIY常见误区有哪些 电脑组装新手注意事项
- 最大最小次序统计量密度函数的推导
- 信安小组 第三周 总结
- 【吐血整理】java程序员推荐轻薄笔记本
- 意想不到的前端三个小妙招
- python汇率的转换程序_如何实现python汇率转换代码
- uniapp H5接入使用环信聊天
- 自费送几本豆瓣9.0高分Python书籍,助你涨薪至30K
- RabbitMQ的简单应用