位置: 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传值)

  • 华为运动健康V11.0.5版本(华为运动健康v11版本)

    华为运动健康V11.0.5版本(华为运动健康v11版本)

  • 华为nova5支持mhl吗(华为nova5支持有线投屏吗)

    华为nova5支持mhl吗(华为nova5支持有线投屏吗)

  • 华为5g手机是否支持4g卡(华为5g手机是否上市)

    华为5g手机是否支持4g卡(华为5g手机是否上市)

  • VLC 中文显示乱码问题(vlc中文文档)

    VLC 中文显示乱码问题(vlc中文文档)

  • 抖音怎么投到电视(抖音怎么投到电视上看)

    抖音怎么投到电视(抖音怎么投到电视上看)

  • 苹果11返回键怎么设置小圆圈(苹果11返回键怎么设置出来)

    苹果11返回键怎么设置小圆圈(苹果11返回键怎么设置出来)

  • 宽带端到端测试不正常(宽带端到端测试什么意思)

    宽带端到端测试不正常(宽带端到端测试什么意思)

  • 华为手机第二个微信怎么下载(华为手机第二个系统占内存吗)

    华为手机第二个微信怎么下载(华为手机第二个系统占内存吗)

  • iphone5s找不到录屏(iphone5s录屏怎么没有声音)

    iphone5s找不到录屏(iphone5s录屏怎么没有声音)

  • 非朋友为什么还能发消息(非朋友为什么还能聊天)

    非朋友为什么还能发消息(非朋友为什么还能聊天)

  • 奇异果tv怎么倍速播放(奇异果tv怎么调倍数)

    奇异果tv怎么倍速播放(奇异果tv怎么调倍数)

  • 身份证后面x怎么输入(身份证后面x怎么输入不进去)

    身份证后面x怎么输入(身份证后面x怎么输入不进去)

  • 曝光模式有哪些(曝光的三种模式)

    曝光模式有哪些(曝光的三种模式)

  • 手机爱奇艺字幕怎么开(手机爱奇艺字幕显示一半)

    手机爱奇艺字幕怎么开(手机爱奇艺字幕显示一半)

  • 正确的ip地址格式范围(正确的ip地址格式怎么判断)

    正确的ip地址格式范围(正确的ip地址格式怎么判断)

  • word高级选项卡在哪(word文档的高级选项卡在哪里)

    word高级选项卡在哪(word文档的高级选项卡在哪里)

  • 通常说的主机是(通常所说的主机指)

    通常说的主机是(通常所说的主机指)

  • 抖音私聊能显示已读吗(抖音私聊能显示ip属地明)

    抖音私聊能显示已读吗(抖音私聊能显示ip属地明)

  • 微信申请收钱码怎么退订(微信申请收钱码怎么弄)

    微信申请收钱码怎么退订(微信申请收钱码怎么弄)

  • 蓝牙无线鼠标怎么连接电脑(蓝牙无线鼠标怎么重置)

    蓝牙无线鼠标怎么连接电脑(蓝牙无线鼠标怎么重置)

  • 买家旺旺打标能删除吗(旺旺号打标了有影响吗)

    买家旺旺打标能删除吗(旺旺号打标了有影响吗)

  • 格式工厂无法定位程序输入点(格式工厂失败)

    格式工厂无法定位程序输入点(格式工厂失败)

  • 电脑word文档在哪打开(电脑word文档在哪里创建)

    电脑word文档在哪打开(电脑word文档在哪里创建)

  • 怎么格式化硬盘(监控怎么格式化硬盘)

    怎么格式化硬盘(监控怎么格式化硬盘)

  • 武陵山脉的最高峰梵净山,中国西南 (© Keitma/Alamy)(武陵山脉海拔)

    武陵山脉的最高峰梵净山,中国西南 (© Keitma/Alamy)(武陵山脉海拔)

  • 公司利润提取如果避税怎么做会计分录?
  • 赠送的代金券属于销售费用吗?
  • 商业保理怎么账务处理
  • 小规模未开票收入填在哪里
  • 筹备期间人工成本怎么算
  • 有会计从业资格证还有用吗
  • 办理外经证后缴税怎么交
  • 发出商品是用进货吗
  • 滴滴出行发票可以抵扣进项税吗
  • 房地产企业预收账款预缴企业所得税
  • 房屋租赁合同印花税谁交
  • 资产减值准备会计科目编码
  • 公司借款给个人超过一年未还
  • 收到投资款现金流量项目是什么
  • 车辆商业险和交强险可以分开买吗
  • 代购的货可以退吗
  • 受托加工物资如何做账
  • 异地预缴企业所得税几个点
  • 年收入超过12万什么时候申报
  • 免税企业收到的专用发票要怎么转出
  • 预付款可以开专票吗
  • 高新技术企业必须要有研发费用吗
  • 企业案例描述
  • 残疾人就业保障金
  • 销售坚果税率多少
  • 公司拍卖车牌
  • 小型微利企业年度汇算清缴报哪些报表
  • 以公允价值计量是什么意思
  • 跨年冲暂估如何做账?
  • win10如何删除windows账户
  • 费用报销流程怎么走
  • 增值税要不要计入固定资产的成本中?
  • ∧oc电脑bios
  • PHP:Memcached::decrementByKey()的用法_Memcached类
  • php b/s
  • php occ
  • hpc程序
  • 凯恩kane
  • 房屋出租一定要签合同吗
  • php 访问数据库
  • 车间管理人员为什么是制造费用
  • 增值税报销是什么意思
  • 小规模纳税人免增值税的账务处理
  • php视频加水印
  • 营改增分录
  • 生产企业免抵退红字冲减
  • 税金及附加可以结转吗
  • 公司注销实收资本怎么处理
  • 发票收款人和复核人在哪儿政
  • 发票一直没验旧会有什么影响
  • 债务资本的税后成本和税后债务成本
  • 当月费用次月报销
  • 母子公司之间的借款利息支出增值税能否抵扣
  • 多计提的收入怎么冲回
  • 应交所得税科目期末是不是应该没有余额
  • 母公司给子公司担保
  • 银行询证函快递费谁负担运费
  • 网吧是个人独资企业还是个体工商户
  • 公司为员工购买汽车怎么申报
  • 注册表的使用
  • win10打
  • gb4.exe
  • win7系统注册表文件损坏无法开机怎么修复
  • centos release6.7
  • linux 管理员登录
  • bootstrap媒体查询写法
  • ExtJs事件机制基本代码模型和流程解析
  • linux的关闭命令
  • pycharm远程调试linux
  • gdi双缓冲绘制
  • unity3d 脚本
  • 使用jquery实现的项目
  • unitytest
  • High Level Networking Concepts
  • jquery网页
  • jquery改变img的src
  • 小规模纳税人开1%普票怎么报税
  • 应纳税额减征额账务处理
  • 税务稽查建议书反馈意见
  • 3.5排量的车船税多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设