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

  • 华为nova7pro支持开空调吗(华为nova7pro支持nfc功能吗)

    华为nova7pro支持开空调吗(华为nova7pro支持nfc功能吗)

  • vivox50ufs是多少呢(vivox50是几g)

    vivox50ufs是多少呢(vivox50是几g)

  • 微信语音怎么转字(微信语音怎么转换成mp3格式)

    微信语音怎么转字(微信语音怎么转换成mp3格式)

  • 微信里面的视频号怎么删除(微信里面的视频在哪里可以找到)

    微信里面的视频号怎么删除(微信里面的视频在哪里可以找到)

  • net err connection reset什么意思(neterrconnectionrefused的原因)

    net err connection reset什么意思(neterrconnectionrefused的原因)

  • 快手上的搜索选项怎么没了(快手上的搜索选项怎么弄)

    快手上的搜索选项怎么没了(快手上的搜索选项怎么弄)

  • miui11发布时间几月几号(miui11发布会时间)

    miui11发布时间几月几号(miui11发布会时间)

  • wifi是有线网络还是无线网络(wifi是有线网络还是无线网)

    wifi是有线网络还是无线网络(wifi是有线网络还是无线网)

  • 苹果id被锁定是什么意思(苹果id锁了怎么解除)

    苹果id被锁定是什么意思(苹果id锁了怎么解除)

  • 华为手机第一次充电要把电用完吗(华为手机第一次充电需要多长时间)

    华为手机第一次充电要把电用完吗(华为手机第一次充电需要多长时间)

  • 华为双系统微信有提示吗(华为双系统微信步数)

    华为双系统微信有提示吗(华为双系统微信步数)

  • 电脑显卡在哪个位置(电脑显卡在哪个位置图片)

    电脑显卡在哪个位置(电脑显卡在哪个位置图片)

  • 苹果账单待处理要多久(苹果账单待处理没有扣款)

    苹果账单待处理要多久(苹果账单待处理没有扣款)

  • 电脑优化是什么意思(电脑优化方案)

    电脑优化是什么意思(电脑优化方案)

  • wifi频率2.4ghz与5ghz的区别(wifi频率2.4ghz与5ghz哪个好)

    wifi频率2.4ghz与5ghz的区别(wifi频率2.4ghz与5ghz哪个好)

  • 计算机网络协议是什么(计算机网络协议名词解释)

    计算机网络协议是什么(计算机网络协议名词解释)

  • smn9600是什么型号

    smn9600是什么型号

  • 笔记本f1到f12功能键怎么关闭(笔记本f1到f12功能键怎么打开)

    笔记本f1到f12功能键怎么关闭(笔记本f1到f12功能键怎么打开)

  • 怎么取消充电保护模式(取消充电保护)

    怎么取消充电保护模式(取消充电保护)

  • 华为手环5什么时候出(华为手环5什么时候上市的)

    华为手环5什么时候出(华为手环5什么时候上市的)

  • 陌声不充钱能玩吗(陌声是不是一定要充钱)

    陌声不充钱能玩吗(陌声是不是一定要充钱)

  • 小米9pro怎么显示运营商名称(小米9显示时间怎么设置在哪里)

    小米9pro怎么显示运营商名称(小米9显示时间怎么设置在哪里)

  • 换5g要换手机卡吗(换5g卡需要换手机号码吗)

    换5g要换手机卡吗(换5g卡需要换手机号码吗)

  • 苹果xsmax能插耳机吗(苹果xsmax插耳机有英文提示)

    苹果xsmax能插耳机吗(苹果xsmax插耳机有英文提示)

  • 拼多多用户名是微信号吗(拼多多用户名是什么?)

    拼多多用户名是微信号吗(拼多多用户名是什么?)

  • 快手上别人发的视频怎么下载(快手上别人发的私信怎么看)

    快手上别人发的视频怎么下载(快手上别人发的私信怎么看)

  • 微信视频动态能看到访客吗(微信视频动态能屏蔽吗)

    微信视频动态能看到访客吗(微信视频动态能屏蔽吗)

  • 设备检验检测
  • 贷款服务可以抵扣增值税吗
  • 应交税金应交增值税已交税金怎么结转
  • 网络公司可以开展什么业务
  • 混凝土委托加工税率
  • 向境外支付特许权使用费免征增值税
  • 错账的查找方法及适用范围
  • 低值易耗品摊销什么意思
  • 工程公司后期维保费用如何入账?
  • 经营性租出固定资产的租金收入计入
  • 税务年报多少钱
  • 实际缴纳增值税税额是什么意思
  • 小规模没有进项可以开发票吗
  • 小企业开发票了还能零报税吗?
  • 三证合一怎么查询
  • 承包合同范围怎么写
  • 发票勾选操作失败怎么回事
  • 外包食堂需要什么资质
  • 怎么查企业的增值税纳税额
  • 发票查出来显示不一致是为啥
  • 红色手撕发票怎么看金额
  • 服务业核定征收税率表
  • 用积分兑换礼品英语怎么说
  • 电脑开机黑屏没信号怎么回事
  • 小规模纳税人增值税专用发票税率
  • 缴纳的权利许可有哪些
  • 计提长期待摊费用会计分录怎么写
  • php二维数组添加数据
  • 工程结算的账务处理
  • 个人独资企业公账转私账
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • 农民专业合作社税收优惠政策
  • 公司承担的社保公积金怎么做账
  • 产品生产业务核算工作实训
  • 微前端的好处和缺陷
  • vue自定义弹窗带有遮罩层
  • 出差餐补贴标准
  • 小微企业免征增值税政策2023
  • adan算法
  • RuntimeError: CUDA error: CUBLAS_STATUS_NOT_INITIALIZED when calling `cublas‘
  • 实收资本大于注册资本是什么意思
  • 财务f/p是什么意思的缩写
  • 贷款为什么要把车过户给别人
  • 文化事业建设费的征收范围
  • 多收了钱怎么记账
  • 简述记账后的凭证修改方法
  • 旅游公司差额征税如何开票
  • 公司股东和自然人的关系
  • 营销策划合作协议
  • 理解的近义词
  • 分配水电费会计科目
  • 餐费计入哪个科目合理避税
  • 应收账款收不回来
  • 房地产公司项目经理待遇
  • 开具的简易计税凭证
  • 未分配利润科目余额在借方还是贷方
  • 招待客人会计分录
  • 用人单位劳务派遣人员工资怎么做账
  • 预算凭证是什么
  • 上年未结转金额是什么意思
  • u8委外怎么核销
  • 金税盘可以申请发票吗
  • 留抵的进项税可以用多少年
  • 企业财务会计是应用在各类企业
  • 住院病假工资如何计算
  • mysql处理
  • 电脑鼠标滑动时没法动,怎么办?
  • windowsxp优化教程
  • psoft1.exe - psoft1是什么进程 有什么作用
  • Windows 8 Modern Apps 网络隔离如何解除?
  • opengl绘制三维图形代码
  • javascript的代码
  • css在ie失效
  • unity web端
  • 一张监控
  • bootstrap按钮图标
  • js跨域是什么意思
  • jquery过滤选择器按照过滤规则分类包括?
  • Material Design:利用RecyclerView CardView实现新闻卡片样式
  • 没有代理记账资格的公司能代理记账吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设