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

  • 企业如何进行软文推广,软文营销的方法(企业如何进行软实力评估)

    企业如何进行软文推广,软文营销的方法(企业如何进行软实力评估)

  • airpods能连接电脑吗(airpods能连接电视蓝牙吗)

    airpods能连接电脑吗(airpods能连接电视蓝牙吗)

  • oppofindx2pro机身尺寸是多少呢(oppofindx2pro rom)

    oppofindx2pro机身尺寸是多少呢(oppofindx2pro rom)

  • 淘宝店铺装修分为哪几个模块(淘宝店铺装修分隔线怎么取消掉)

    淘宝店铺装修分为哪几个模块(淘宝店铺装修分隔线怎么取消掉)

  • 华为p40与p30pro区别(华为p40跟p30pro区别)

    华为p40与p30pro区别(华为p40跟p30pro区别)

  • 联想笔记本网线接口在哪(联想笔记本网线连接不到网络)

    联想笔记本网线接口在哪(联想笔记本网线连接不到网络)

  • sim卡可能被植入病毒吗(sim卡可能被植入监听)

    sim卡可能被植入病毒吗(sim卡可能被植入监听)

  • 苹果和苹果发信息免费的吗(苹果和苹果发信息是绿色的)

    苹果和苹果发信息免费的吗(苹果和苹果发信息是绿色的)

  • iphonese2是双扬声器吗(iphonese是双扬声器)

    iphonese2是双扬声器吗(iphonese是双扬声器)

  • web的主要功能是(web功能是什么)

    web的主要功能是(web功能是什么)

  • 唯品会退款多久到账,怎样才能知道已退款(唯品会退款多久到帐)

    唯品会退款多久到账,怎样才能知道已退款(唯品会退款多久到帐)

  • 魅族16T屏幕材质(魅族16th屏幕材质)

    魅族16T屏幕材质(魅族16th屏幕材质)

  • 苹果8手机支持声卡吗(苹果8手机支持无线充电吗)

    苹果8手机支持声卡吗(苹果8手机支持无线充电吗)

  • 怎样在表格中加一条线(怎样在表格中加电子版照片)

    怎样在表格中加一条线(怎样在表格中加电子版照片)

  • 华为手机黑屏打不开怎么办(华为手机黑屏打不开怎么办几种解决办法介绍图文)

    华为手机黑屏打不开怎么办(华为手机黑屏打不开怎么办几种解决办法介绍图文)

  • 抖音可以游客登录吗(抖音游客登录搜索别人能看见吗)

    抖音可以游客登录吗(抖音游客登录搜索别人能看见吗)

  • reno私密相册怎么打开(opporeno2相册私密)

    reno私密相册怎么打开(opporeno2相册私密)

  • cdma是什么意思(中国电信cdma是什么意思)

    cdma是什么意思(中国电信cdma是什么意思)

  • 5g那一年上市的(5g哪年开始研发)

    5g那一年上市的(5g哪年开始研发)

  • 美图秀秀怎么去掉人物(美图秀秀怎么去红眼)

    美图秀秀怎么去掉人物(美图秀秀怎么去红眼)

  • 三星a80什么处理器(三星a80什么处理器最好)

    三星a80什么处理器(三星a80什么处理器最好)

  • 红米note7和note7pro的区别(红米note7和note7pro外观一样吗)

    红米note7和note7pro的区别(红米note7和note7pro外观一样吗)

  • ipad教育优惠怎么弄(教育优惠买ipad怎么弄)

    ipad教育优惠怎么弄(教育优惠买ipad怎么弄)

  • 小米8回收站恢复的照片在哪(小米回收站恢复)

    小米8回收站恢复的照片在哪(小米回收站恢复)

  • 查找我的iphone显示旧位置(查找我的iphone显示几天前的位置怎么回事)

    查找我的iphone显示旧位置(查找我的iphone显示几天前的位置怎么回事)

  • 最详细的主板bios设置图解教程bios设置指南史无前例(主板类型大全)

    最详细的主板bios设置图解教程bios设置指南史无前例(主板类型大全)

  • Linux开机报错unable to load selinux policy的解决方法(linux开机出现grub解决方法)

    Linux开机报错unable to load selinux policy的解决方法(linux开机出现grub解决方法)

  • PHP的几个常用加密函数(php添加)

    PHP的几个常用加密函数(php添加)

  • 个人生产经营所得税怎么计算
  • 换了公司后个税还要申请申报吗
  • 出口退税认定如何办理
  • 收到上年度所得税发票
  • 预借差旅费附什么原始凭证
  • 企业所得税的研究论文范文
  • 增值税科目年末结转可以吗
  • 行政单位要考什么
  • 非现金资产债务怎么算
  • 拍卖书画收入如何交税
  • 银行小额贷款是怎么还款的
  • 在建工程工伤保险
  • 收到电费发票做账摘要怎么写
  • 出售未完成折旧固定资产进项税转出
  • 收到展会补贴账务处理
  • 企业给员工缴纳的五险最低交多少
  • 营改增后场地租赁税率
  • 汇算清缴退税现金流量表
  • 印花税计提会计分录
  • 房产赠与税如何征收2021
  • 建筑行业劳务费会计分录
  • 基本账户代发代扣怎么操作
  • 家电折旧费法律依据
  • 火车票飞机票计入什么费用
  • 出口加工区内企业可经营什么业务
  • 实收资本是否可以更改
  • 售后回租 出租方
  • 汇算清缴的年报在哪里查询
  • 去年多计提的个税如何处理
  • 收到退回款项
  • 预收外汇如何结汇
  • 已认证留抵待抵扣税额分录
  • yolov2训练
  • 净资产现金回收率说明什么
  • 增值税缓交政策
  • 固定资产进项税额怎么抵扣
  • 挖机出租给公司
  • 广告费可以结转几年扣除
  • 前端 自动化脚本 怎么写
  • 使用什么指令可以清空memcached数据库中的所有数据
  • autoreconf -ivf
  • 资产证券化会计处理案例
  • 厂区道路不应该使用哪种材料
  • 普通发票不满8项怎么开明细
  • 购进销售农产品正常损耗怎么算
  • 如何检查文件是否有毒
  • mysql备份导入
  • 公司扣除保险费会计分录
  • 融资租入的固定资产视为自有固定资产
  • 实物投资入股
  • 用公司名义买的东西送礼需要归还么
  • 销售折让的会计分录怎么做
  • 小规模纳税人采购需要发票吗
  • 购进商品用于销售
  • 支付货款订金入什么科目
  • 法人购买设备投入企业
  • 钱汇错了报警有用吗
  • 会计科目费用类
  • xp系统怎么取消自动关机
  • win8进入传统界面
  • window10声音自动减小
  • xp显示缩略图
  • windows8图片
  • win8系统自带浏览器
  • python socket操作
  • python挑战
  • unity unity3d
  • Android游戏开发pdf
  • linux脚本作用
  • python cx_Oracle的基础使用方法(连接和增删改查)
  • cocos 3.x android下home键后,切回游戏时黑屏太久的问题
  • nodejs tcp
  • 省市二级联动小组是什么
  • Android Studio --自动删除没有用的资源,给APK减减肥
  • javascriptwhile
  • js new实现
  • 绵阳市十大纳税企业排名
  • 查询发票号码
  • 开票没有0还是o
  • 刚成立小公司的流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设