位置: IT常识 - 正文

简单的随机乱码生成(验证码生成)| HTML(简单的随机乱码怎么解决)

编辑:rootadmin
简单的随机乱码生成(验证码生成)| HTML

推荐整理分享简单的随机乱码生成(验证码生成)| HTML(简单的随机乱码怎么解决),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:随机生成编码的方法,自动生成随机编码,随机编码,随机码输入,随机乱码号码生成器,简单的随机乱码怎么解决,简单的随机乱码游戏,简单的随机乱码软件,内容如对您有帮助,希望把文章链接给更多的朋友!

想想自己也学了很久的前端的技术了,这两天在自己设计一个网站的时候,突然想到了登录验证码的这个东西,用了这个比较简单的随机码生成,大家如果有需要也可以用来参考。

代码展示(部分内容使用了jquery):

HTML部分:

<div class="user_code"> <input type="text" name="code" placeholder="请输入验证码"> <div class="code_tip"></div> <div class="code_tip_box" title="点击刷新验证码"></div></div>

CSS部分

.user_code { position: relative; width: 80%; height: 36px; margin: 0 auto 20px; overflow: hidden;}.user_code input { float: left; width: 48%; height: 35px; background: none; text-align: center; border-bottom: 1px solid #000;}.user_code .code_tip,.user_code .code_tip_box { float: right; width: 48%; height: 35px; border: 1px solid #aaa; text-align: center; line-height: 33px; font-size: 18px; background: none;}.user_code .code_tip_box { position: absolute; right: 0; top: 0; border: none; background: rgba(200, 200, 200, 0.2); cursor: pointer;}

JavaScript部分

// 验证码写入到指定位置$(".code_tip").text(code(4));$(".code_tip_box").click(() => { $(".code_tip").text(code(4));});/* 自动生成随机验证码 */function code(code_length) { let code_tips = ""; let content = []; let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; /* 重复数字 */ content = content.concat(num); /* 大写字母 */ for (let a = 65; a <= 90; a++) { content.push(String.fromCharCode(a)); }; /* 重复数字 */ content = content.concat(num); /* 小写字母 */ for (let b = 97; b <= 122; b++) { content.push(String.fromCharCode(b)); }; /* 重复数字 */ content = content.concat(num); /* 输出长度 */ for (let c = 0; c < code_length; c++) { code_tips += content[Math.floor(Math.random() * content.length)]; }; return code_tips;};

效果展示:

简单的随机乱码生成(验证码生成)| HTML(简单的随机乱码怎么解决)

关于这里为什么要把数字的部分重复几遍的说明:

大写字母数量:26

小写字母数量:26

数字数量:10 * 3 = 30

本质上还是为了在输出的时候能够让字母和数字的输出相对来说平均一些

但是就有可能出现情况是数字的输出数量比字母要多

各位在使用的时候,可以将两行用于重复数字的代码删除

以上的代码部分均是从自己正在制作的一个网页中截取出来的,CSS代码可能和各位的实际需求并不适配,根据需要自行修改就好。

完整代码已上传至git:

gitee:个人代码分享gitee

github:个人代码分享github

以上内容均仅作参考,原创作品,严禁转载。

本文链接地址:https://www.jiuchutong.com/zhishi/289814.html 转载请保留说明!

上一篇:清晨结了霜的树林,中国四姑娘山 (© Robert Harding World Imagery/Offset by Shutterstock)(结霜的早晨)

下一篇:uniapp怎么传跳转页面并传递对象参数(uniapp传值)

  • 荣耀50手电筒快捷键在哪里(荣耀50手电筒快捷键在哪里设置)

    荣耀50手电筒快捷键在哪里(荣耀50手电筒快捷键在哪里设置)

  • cpu多少度会损坏(cpu长时间90度会烧坏吗)

    cpu多少度会损坏(cpu长时间90度会烧坏吗)

  • 华为p30翻页怎么设置(华为p30手机桌面翻页效果怎么改)

    华为p30翻页怎么设置(华为p30手机桌面翻页效果怎么改)

  • 微信注销的手机号多久能换绑(微信注销的手机号多久能绑定其他微信)

    微信注销的手机号多久能换绑(微信注销的手机号多久能绑定其他微信)

  • 在wps表格中怎么画线条(在wps表格中怎么把数字对齐)

    在wps表格中怎么画线条(在wps表格中怎么把数字对齐)

  • 快手beta版已过期什么意思(快手beta版已过期还删不掉)

    快手beta版已过期什么意思(快手beta版已过期还删不掉)

  • vivoy97是什么时候上市的(vivoy97什么时候发布的)

    vivoy97是什么时候上市的(vivoy97什么时候发布的)

  • 拼多多用qq登录算新用户吗(拼多多用qq登录可以用微信支付吗)

    拼多多用qq登录算新用户吗(拼多多用qq登录可以用微信支付吗)

  • 快手小店保证金可以退吗(快手小店保证金多长时间能退回)

    快手小店保证金可以退吗(快手小店保证金多长时间能退回)

  • 美团众包账号注销了以后还能申请吗(美团众包账号注销后可以重新注册吗)

    美团众包账号注销了以后还能申请吗(美团众包账号注销后可以重新注册吗)

  • 淘宝足迹怎么查一年的(淘宝足迹怎么查去年的)

    淘宝足迹怎么查一年的(淘宝足迹怎么查去年的)

  • 京东同城配送在哪找(京东同城配送在哪下单)

    京东同城配送在哪找(京东同城配送在哪下单)

  • 红米note8怎么开启勿扰模式(红米note8pro怎么打开)

    红米note8怎么开启勿扰模式(红米note8pro怎么打开)

  • ipx7和ip67哪个更防水(ip6x和ipx7哪个好)

    ipx7和ip67哪个更防水(ip6x和ipx7哪个好)

  • vivo怎么开启nfc功能(vivo怎么开启隐藏空间)

    vivo怎么开启nfc功能(vivo怎么开启隐藏空间)

  • 本地连接未识别网络怎么弄(本地连接未识别的网络无法上网)

    本地连接未识别网络怎么弄(本地连接未识别的网络无法上网)

  • 小米手机不能安装微信(小米手机不能安装巅峰极速)

    小米手机不能安装微信(小米手机不能安装巅峰极速)

  • 苹果11后面是玻璃的吗(苹果11后面玻璃有印子怎么去除)

    苹果11后面是玻璃的吗(苹果11后面玻璃有印子怎么去除)

  • klwal10什么型号(klwal10手机)

    klwal10什么型号(klwal10手机)

  • 青客宝余额提现不了(青客宝提现要审核多久)

    青客宝余额提现不了(青客宝提现要审核多久)

  • 小米6电池容量多大(小米6电池容量校准)

    小米6电池容量多大(小米6电池容量校准)

  • 微信上电话号码怎么设置(微信上电话号码怎么改成别的)

    微信上电话号码怎么设置(微信上电话号码怎么改成别的)

  • 微软正为更多电脑自动更新 Win10 21H1(微软正在更新office)

    微软正为更多电脑自动更新 Win10 21H1(微软正在更新office)

  • 增值税结转会计科目
  • 中国税收居民判定标准
  • 杭天金税财务软件多少钱
  • 什么是免税合并
  • 下列哪些收入为免税收入
  • 消费税可以在企业抵扣吗
  • 增值税税率调整文件
  • 红字发票信息表编号在哪里看
  • 小规模纳税人每季度超过30万交税
  • 掌握无形资产核算方法
  • 税负率怎么算计算公式举例说明
  • 公司年会聚餐的简短讲话
  • 印花税不计提是当月交当月吗
  • 社保上面的每月的缴费基数是什么意思?
  • 企业网银短信提醒费用
  • 境内所得境外发放工资
  • 本月发放上月工资情况说明
  • 合伙企业交个税例题
  • 房租的应收必须交吗
  • 计提个人负担的社会保险费分录
  • 租赁厂房水电费怎么算
  • linux 界面卡死
  • windows10如何设置输入法
  • 服务公司收到服务费发票怎么做账
  • 中秋佳节发放职工福利的话语
  • 总公司以固定资产出资入股,固定资产是不是新公司的
  • RuntimeError: (PreconditionNotMet) The third-party dynamic library (cudnn64_7.dll) that Paddle depen
  • 转销盘盈会计分录
  • php如何上传1个g以上的文件
  • 固定资产折旧的计算方法
  • 免征企业所得税的有
  • 偷税行为五年后被发现要接受行政处罚吗?
  • php调用ffmpeg实现切片
  • 小企业遵循什么会计准则
  • 招待费增值税能抵扣吗
  • 购买房屋缴纳的税款
  • 六自由度机器人简图
  • php guzzle 异步
  • 应收票据和应付票据
  • 银行承兑汇票存在的风险
  • 临时工工资账务处理该怎么进行
  • 折旧的结转
  • PostgreSQL教程(六):函数和操作符详解(2)
  • 公司注销公章的处理
  • 短期借款预提利息通过短期借款科目核算
  • 汇算清缴是怎么弄的
  • 什么是电子银行服务
  • 亏损企业对外捐赠的税前扣除
  • 资源税的账务处理
  • 登记账簿遇到的问题及解决
  • 无形资产的处置方式有哪些
  • 兼职人员属于雇佣人吗
  • 去年的增值税专用发票可以重开吗
  • 在哪找从平台消费的人
  • 日记账的建立
  • 低值易耗品最新定义
  • mysql的基本介绍
  • sql自定义数据类型
  • win8装机软件
  • ubuntu系统安装教程详细
  • centos7如何修改用户名
  • rdesktop命令
  • eudcedit.exe
  • windows无法启动,可能原因
  • windows7与xp
  • linux的总结
  • win10预览版
  • win8鼠标指针不见了
  • win8怎么开启蓝牙
  • threejs中文文档pdf
  • bat查看ip地址和mac地址
  • 仿百度首页html代码静态
  • python快捷键大全
  • jquery查找当前元素的父元素
  • js获取当前月份的天数
  • 深入浅出jquery
  • 武汉电子税务局申领发票以后如何自取
  • 加大税务稽查工作的建议
  • 国家税务总局在哪
  • 企业税务人员岗位竞聘报告怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设