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

article/2025/11/6 1:50:44

 今日学习了验证码的生成与检验,逻辑为:

1.加载页面时自动随机生成数字验证码。

2.点击看不清,更换验证码重新生成验证码。

3.点击确定按钮检验输入框内的值与验证码是否相等,不相等时弹出警告并清空输入框和刷新验证码。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>验证码</title><style>#checkcode{background-color:lightgray;color: blue;font-size: 30px;}#renew{color: blue;text-decoration:underline;cursor:pointer; }</style>
</head>
<body><div><span id="checkcode">858158</span><a id="renew">看不清,换一张</a></div><div><p>验证码:<input type="text" id="inputcode"></p><button id="check">确定</button></div><script>//加载时生成验证码window.onload=function(){var res=getcode();function getcode(){var arr=['0','1','2','3','4','5','6','7','8','9']var str='';for(var i=0;i<6;i++){var num=Math.round(Math.random()*(9-0)+0);str += arr[num];}return str;}document.getElementById('checkcode').innerText=res;//点击生成验证码document.getElementById('renew').onclick=function(){document.getElementById('checkcode').innerText=getcode();}//点击确定检验验证码document.getElementById('check').onclick=function(){var code=document.getElementById('checkcode').innerText;var inputcode=document.getElementById('inputcode').value;if(code != inputcode){alert("您输入的验证码不正确");document.getElementById('inputcode').value=''document.getElementById('checkcode').innerText=getcode();return false;}}}</script>
</body>
</html>

显示效果为: 

 


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

相关文章

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;找到“设置单元格格式”。在水平对齐下的“常规”换成“填充”即可把溢出的文字隐藏。下边的“文本控制”下的“自动换行”勾选即可自动换行。

Bootstrap Table 单元格内容过长显示问题

遇到这个问题&#xff1a;网上查了很多方法&#xff0c;单元格内容显示过长&#xff0c;通过下面的样式控制&#xff0c;可以实现精简显示(文末奉上&#xff0c;样式说明&#xff09; 给表格添加 样式&#xff1a; table { table-layout:fixed; } 给每个单元格添加下面的样…

element-UI table单元格的内容太长,隐藏文字,鼠标滑过弹框显示

element-UI table单元格的内容太长&#xff0c;隐藏文字&#xff0c;鼠标滑过弹框显示 参考&#xff1a;https://blog.csdn.net/qq_42533735/article/details/107057038?utm_mediumdistribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&dep…

java让内容不超出单元格_解决layui表格内文本超出隐藏的问题

解决layui表格内文本超出隐藏的问题 只需要更改样式即可 图片: 代码如下 .layui-table-cell{height:auto; overflow:visible; text-overflow:inherit; 以上这篇解决layui表格内文本超出隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我…

EXCEL不同单元格格式太多

EXCEL复制&#xff0c;移动&#xff0c;或者操作时 弹出以下错误&#xff1a;不同单元格格式太多 操作前&#xff0c;请先将EXCEL 复制一份&#xff0c;以免操作出错&#xff0c;EXCEL无法打开&#xff08;非常重要!!!&#xff09; 按AltF11键(有些电脑需要点击AltFnF11)&…

Excel的单元格是怎么隐藏的

在excel中&#xff0c;单元格是不可能隐藏的。 因为单元格是行/列交叉位置形成的一个小方格&#xff0c;工作表中的行/列是始终存在的&#xff0c;所以单元格就以行/列的存在而存在。 在单元格中可以隐藏公式。 具体方法是&#xff1a; 选中整个工作表&#xff0c;执行“格式…

清空合并单元格之隐藏单元格

合并单元格有真有假&#xff0c;如果大家不知道二者的区别&#xff0c;请移步《Excel合并单元格之真假李逵》先了解一下。识别两种合并单元格的方法也很简单&#xff0c;辅助列使用公式读取一下单元格内容&#xff0c;如果合并单元格之隐藏单元格仍然有内容&#xff0c;那么这就…