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

  • 小规模开票超过五百万元,会自动升为一般纳税人吗
  • 运费增值税税率有5吗
  • 增值税发票管理办法
  • 印花税计入税金及附加吗
  • 购买信息技术服务费摘要怎么写
  • 出口退税网上服务中心app
  • 商贸企业增加值
  • 红字发票信息表填好后再怎么操作
  • 母子公司间提供保洁保安合法吗
  • 上年留抵税,次年抵扣分录
  • 增值税为什么不重复征税
  • 公司外籍人员签证如何办理
  • 免税货物开成含税率的怎么报税?
  • 退税勾选的发票账务处理
  • 铲车费属于劳务费吗
  • 待认证进项税额借方余额表示什么
  • 母公司向全资子公司增资
  • 新注册的个体户怎么开发票
  • 税控系统维护费280会计分录
  • 设定受益计划资产上限
  • 退休返聘人员的劳动权益保护
  • 企业收到应收账款6要素哪个增加哪个减少
  • 单位为员工支付医疗费
  • ppt文件打不开了怎么办
  • win10下载软件被阻止安装怎么办
  • Windows 11 Build 22000.176 (KB5006050) 更新推送(附更新内容+安装)
  • 金融工具减值会影响什么
  • 企业财务人员如何防范电信诈骗
  • 梅林澳大利亚信号好最好吗
  • 短视频小程序源码
  • 购销合同印花税计算方法
  • 医院会计制度与实务
  • cakephp菜鸟教程
  • 应用加载慢
  • 质保金企业所得税纳税时间
  • 关联方计提坏账吗
  • 织梦产品详情页相关产品推荐调用代码
  • 个人重组债务怎么交税
  • 企业年金是否要交个税
  • 成本票和进项票举例说明
  • MySQL中distinct语句的基本原理及其与group by的比较
  • 存货成本核算方式
  • 销售人员的销售额是工作绩效的重要指标
  • 应收账款属于会计分录
  • 小企业固定资产入账标准
  • 以前年度损益的科目代码
  • 企业如何进行促销
  • 网银费用及回单怎么查
  • 支付收购股权款如何做账
  • 个人账户转公司账户附言写什么
  • 企业投资分红帐务处理?
  • 外币汇率分录
  • 预付款已经开了发票未到货要怎么做账
  • 担保贷款借款人死亡
  • 公司支付劳务工资怎么做账
  • 租入办公楼装修费按几年摊销
  • MySQL下载安装视频
  • sql实现选择操作
  • centos6.10安装教程
  • mysql8.0免安装
  • win8系统打开苹果系统文件
  • wkqkpick.exe进程是什么
  • 电脑进程wsappx是什么
  • win7 系统设置
  • win8开机启动
  • launcheflc.exe什么意思
  • npssvc.exe - npssvc是什么进程 有什么用
  • linux系统查看系统信息
  • linux对比文件夹差异
  • [置顶]电影名字《收件人不详》
  • javascript的核心语言对象包括
  • 搭建nodejs环境
  • js鼠标框选
  • js实现聊天框
  • python连接mq
  • 基础的十进制按什么来算
  • 江苏发票真伪查询
  • 税务局六大攻坚
  • 平原新区郑州外国语学校
  • 江苏省镇江市街道名称
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设