Javascript验证码的生成和验证,源代码

article/2025/11/6 1:13:56

如果有幸被那位大神看见希望可以为我指出下面的问题

我是一个前端白小白,刚开始学和记录自己感觉不错的小项目,各位大神有好的方法或者更好的写法可以指点一二,写不好的时候随便喷 我想看一下我潜力到底有多大。

  • <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title>随机验证码生成于校验</title><style>#div1{width: 100px;height: 100px;background: #ccc;align-items: center;display: flex;justify-content: center;cursor: pointer;}#pp{color: red;font-size: 18px;}</style></head><body><div id="div1"><p id="pp"></p></div><input type="text" id="input1"><input type="button" value="验证" id="input"><script>window.onload=function(){ //设置全局变量var code;//获取idvar codeDiv = document.getElementById("pp");var codeinput=document.getElementById("input1");var codeValue = document.getElementById("input");var div2 = document.getElementById("div1");//调用函数并赋值给p标签codeDiv.innerHTML=randomCode();//获取随机数的函数function random(max,min){return Math.floor(Math.random()*(max-min)+min);}function randomCode(){code='';//设置验证码长度var codeLength = 4;//设置验证码的范围var creatCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M',' N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];for(var i=0;i<codeLength;i++){//设置随机范围var index = random(0,36);code+=creatCode[index];}return code;}//点击事件 对验证码对错判断codeValue.onclick=function(){// 把输出框中的字符转换成大写字母var dx = codeinput.value.toUpperCase();if(dx===code){//跳转页面地址window.location.href='https://www.baidu.com';}else{alert("输入验证码不正确");//把输入框清空codeinput.value='';//在刷新验证码codeDiv.innerHTML=randomCode();}}div2.onclick=function(){codeDiv.innerHTML=randomCode();}}</script></body>
    </html>

第一个问题:这个里面我有一个问还是不明白。

 function randomCode(){code='';//设置验证码长度var codeLength = 4;//设置验证码的范围var creatCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M',' N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];for(var i=0;i<codeLength;i++){//设置随机范围var index = random(0,36);code+=creatCode[index];}return code;}

就是这上面这段代码中,那个return code;我一开始是打算用直接codeDiv.innerHTML= code,但是我这样写报错了我也不知道为啥 ,

第二问题:有时候生成的验证码中会有下图一样的间距 ,这是怎么会事呢?

 

 感谢大神能看完


http://chatgpt.dhexx.cn/article/CQ5ZuiC7.shtml

相关文章

JavaScript验证码

验证码在生活中很常见&#xff0c;所以做了个验证码案例&#xff1a; 感觉蛮简单的&#xff0c;就不解释了&#xff0c;代码里有注释&#xff0c;如下&#xff1a; var span document.getElementsByTagName(span)[0];var a document.getElementsByTagName(a)[0];var input …

JavaScript验证码示例

In this tutorial you will get JavaScript captcha example. 在本教程中&#xff0c;您将获得JavaScript验证码示例。 Captcha is used to determine whether or not the user that is filling and submitting a web form is human. While developing web projects we often …

js验证码插件

文章目录 1、gVerify插件1.1 源代码1.2 属性及方法1.3 使用 2、vue-puzzle-vcode插件2.1 安装2.2 参数与事件2.3 使用 3、vue2-verify3.1 安装3.2 参数3.3 使用 4、vue-monoplasty-slide-verify4.1 安装4.2 引入4.3 参数与事件4.4 使用 1、gVerify插件 &#xff08;常规验证码…

前端-js 验证码

html 代码 js 代码 // 存放随机的验证码 var showNum []; draw(showNum); // 封装一个把随机验证码放在画布上 function draw(showNum) { // 获取canvas var canvas document.querySelector("#cl"); console.log(canvas) var ctx canvas.getContext(&quo…

js案例---验证码

我们在进行注册与登录时&#xff0c;常常会有验证码的使用&#xff0c;今天我们来用js实现验证码的功能 我们先写网页的样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册表</title>&l…

暑期学习日记27:js实现验证码生成与检验

今日学习了验证码的生成与检验&#xff0c;逻辑为&#xff1a; 1.加载页面时自动随机生成数字验证码。 2.点击看不清&#xff0c;更换验证码重新生成验证码。 3.点击确定按钮检验输入框内的值与验证码是否相等&#xff0c;不相等时弹出警告并清空输入框和刷新验证码。 代码…

js学习--验证码的实现

1.使用p标签创建存放验证码&#xff0c;并通过css设置p标签的样式。 <p>点击获取验证码</p>p {width: 120px;height: 50px;border: 1px solid;text-align: center;line-height: 50px;} 2.设置script标签&#xff0c;在标签内实现验证码功能。 2.1 获取元素标签。…

js简单验证码的生成和验证

如何用js生成简单验证码&#xff0c;并验证是否正确的方法 1、html页面如下 <div><table border"0" cellspacing"5" cellpadding"5" ><tr><td> <div id"checkCode" class"code" onclick"…

IDEA控制台字体大小设置

进入如下图所示设置&#xff0c;调整size

IDEA修改字体及大小

1.设置→编辑器→颜色和字体→Font&#xff0c;方案“Default”点击“另存为”&#xff0c;点击“确定”。 2.之后便可以修改字体样式及大小&#xff0c;点击“确定”。

Intellij IDEA 字体大小设置

场景 由于种种原因&#xff0c;对种种&#xff0c;字体看着或大或小&#xff0c;需要我们调整整一下下&#xff0c;这样写代码也会更加的舒爽一些。 设置方法 File——>Settings——>Editor——>Font

IDEA中修改字体大小无效的问题

在IDEA中我将字体从12改成22后&#xff0c;界面显示的字体没有变化&#xff0c;进一步了解发下。 我设置的字体大小和主题中的字体有冲突导致的&#xff0c;进入主题后&#xff0c;进行修改字体大小&#xff0c;问题解决。

IDEA--字体大小设置

IDEA版本&#xff1a; 2019.3.3 字体 一、界面字体 File -> Settings Appearance & Behavior -> Appearance 二、程序字体 Editor -> Colors & Fonts -> Font

调整idea面板字体大小

点开file控制器&#xff0c;找到settings&#xff0c;然后在搜索栏中搜索size&#xff0c;注意是要font类型的&#xff0c;然后就可以 调整字体号数&#xff0c;最后点击apply即可。

【WPS】表格设置单元格内容溢出隐藏

现在的单元格的内容过长导致内容溢出 选择目标单元格&#xff0c;右键弹出菜单&#xff0c;点击“设置单元格格式”&#xff0c;弹出单元格格式对话框 在对齐--文本对齐方式--水平对齐&#xff0c;选择填充&#xff0c;点击确定 这样内容就不会在右边的单元格显示了

Excel 单元格文字过长时被隐藏

1、可能是因为目标单元格后面一个单元格中有内容 解决&#xff1a;选中要回行的单元格点击开始→自动回行&#xff0c;或者双击要回行的单元格在要回行的文字后面使用快捷键&#xff1a;altenter 2、可能是因为Excel设置了自动适应列宽&#xff0c;&#xff08;我是误点了快捷键…

excel拆分单元格内容_Excel 快捷键合集

点击上方“蓝字”关注&#xff0c;酷爽一夏 好用的Excel快捷键 最近发现好多小伙伴都在开始学习EXCEL&#xff0c;就此想把自己最近几年积累的资料分享给各位朋友&#xff0c;特此&#xff0c;首先整理了一下自己在EXCEL中常用的一些快捷键&#xff1a; 01 Ctrl合集 CtrlC …

Element table当单元格的内容过长被隐藏时使用show-overflow-tooltip显示 tooltip

效果:只有当table表格单元格的内容超出表格时会自动出现省略号,并且 tooltip 表格中的内容 没有超出的不会出现 ,提高table的整洁度. 1. Element table当单元格的内容过长被隐藏时使用show-overflow-tooltip显示 tooltip <el-table:data"dataList":fit"t…

html表格内容溢出隐藏,溢出隐藏:最全的利用css解决内容溢出问题的几种方案...

在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体如何实现呢?本文就告诉你如何使用换行,省略号等方式来解决这些…

Excel单元格内容太多溢出怎么办?怎么单元格内自动换行?

选中要更改的区域&#xff0c;右击鼠标&#xff0c;找到“设置单元格格式”。在水平对齐下的“常规”换成“填充”即可把溢出的文字隐藏。下边的“文本控制”下的“自动换行”勾选即可自动换行。