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

  • 保本理财增值税可以开票吗怎么开
  • 如何查询个人所有贷款记录
  • 银行存款支付是借还是贷
  • 汇算清缴哪些需要调增调减
  • 企业销售折扣折让会计分录
  • 基本户的利息和本金比例
  • 幼儿园属于小型幼儿吗
  • 销售过程中客户买的是什么
  • 留存收益转增资本有什么好处
  • 已抵扣进项怎么转出
  • 以汽车出资
  • 什么叫外埠存款
  • 免税申请怎么办理
  • 非盈利企业账务处理
  • 从境外取得的佣金
  • 企业开发票的人员要经过培训吗?
  • 审核费用发票需要发票吗
  • 城市建设维护税怎么计算
  • 个人所得税有哪几种
  • 建筑企业使用民工的税务风险你清楚吗?
  • 购进一批材料,材料已经入库
  • 基建项目税率
  • 增长率应该要如何计算呢?
  • 一般纳税人税负率
  • 汇算清缴工资填哪个数
  • 权益法下对投资者的要求
  • 鸿蒙系统桌面如何设置
  • 怎么计提企业所得税在哪里知道计提多少
  • the Pura Meduwe Karang神庙中雕刻艺术家W.O.J.Nieuwenkamp的作品,印度尼西亚巴厘岛 (© John Elk III/Getty Images)
  • 重置edge浏览器设置
  • 确认坏账的会计处理
  • android上传图片到服务器
  • 销售无形资产增值税税率2022
  • 产品出库单什么时候入账
  • 事业单位结息会降薪吗
  • phpajax技术
  • 工会费会计分录
  • 冰川湾国家公园的冰川不止有白色一种
  • token的用处
  • 广告费与业务宣传费范围
  • linux mput命令
  • 其他发票是什么意思
  • 保险费支出是什么意思
  • 未开票收入增值税申报
  • 支付债券发行费怎么算
  • 营改增一般纳税人简易征收的范围
  • 企业对公帐户怎么转出私人帐户
  • 所得税申报报表
  • 追索权行使的形式要件是什么
  • 工作服入什么科目类别
  • 佣金支出和手续费一样吗
  • 现金日记账年结需要另起一页吗
  • 无形资产自行开发
  • 单位社保缴费基数比例
  • 进项发票和销项发票怎么抵扣
  • 承租人对融资租赁业务进行会计处理的方法有( )
  • 发票开错了记账凭证如何做?
  • 明细账怎么订起来
  • mysql安装不成功怎么办
  • bois开启usb功能
  • ubuntu文本编辑器怎么打开
  • 苹果mac os x 怎么样使用光盘
  • linux系统bug
  • cmd命令符大全
  • mac终端好玩的命令
  • win7打开回收站
  • 在linux系统中,用来存放系统所需要的配置文件
  • 有哪些小工具
  • OKHttp源码解析-ConnectionPool对Connection重用机制&Http/Https/SPDY协议选择
  • unity一运行就停止工作
  • Unity3D游戏开发(第2版)
  • js中的div标签怎么用
  • 收集和整理的区别
  • 小汽车碰撞游戏视频
  • 钢结构税收政策
  • 什么叫税务协查
  • 企业所得税预缴时间规定
  • 上海房产税税收
  • 深圳市福田区行政代码是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设