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

  • 驱动程序无法使用怎么办(驱动程序无法使用但是能打印)

    驱动程序无法使用怎么办(驱动程序无法使用但是能打印)

  • 快手主页的联系电话图标怎么开通的(快手主页的联系电话怎么设置视频教程)

    快手主页的联系电话图标怎么开通的(快手主页的联系电话怎么设置视频教程)

  • 抖音秒关注秒取消会知道么(抖音秒关注秒取消对方给我打招呼)

    抖音秒关注秒取消会知道么(抖音秒关注秒取消对方给我打招呼)

  • 芒果tv电脑版叫什么(芒果tv电脑版叫什么软件)

    芒果tv电脑版叫什么(芒果tv电脑版叫什么软件)

  • 小米10微信视频怎么美颜(小米10微信视频黑屏怎么回事)

    小米10微信视频怎么美颜(小米10微信视频黑屏怎么回事)

  • 开机显示正在准备自动修复怎么办(开机显示正在准备修复)

    开机显示正在准备自动修复怎么办(开机显示正在准备修复)

  • 3dmax透视图快捷键(3dmax在透视图调整视角的快捷键是哪个)

    3dmax透视图快捷键(3dmax在透视图调整视角的快捷键是哪个)

  • 组装一台计算机需要什么(组装一台计算机需要哪些硬件设备)

    组装一台计算机需要什么(组装一台计算机需要哪些硬件设备)

  • 苹果电脑中文输入法打不出字(苹果电脑中文输入法快捷键)

    苹果电脑中文输入法打不出字(苹果电脑中文输入法快捷键)

  • nova5屏幕为什么不清晰(nova5z手机屏幕)

    nova5屏幕为什么不清晰(nova5z手机屏幕)

  • mac截图的图片在哪里(mac截的图在哪)

    mac截图的图片在哪里(mac截的图在哪)

  • 状态栏怎么设置(手机顶部状态栏怎么设置)

    状态栏怎么设置(手机顶部状态栏怎么设置)

  • 手机qq空间怎么退出(手机qq空间怎么显示手机型号)

    手机qq空间怎么退出(手机qq空间怎么显示手机型号)

  • 收到你的戳一下啥意思快手(快手显示对方收到你的戳一下)

    收到你的戳一下啥意思快手(快手显示对方收到你的戳一下)

  • 抖音身份证号认证解除(抖音身份证号认证不了)

    抖音身份证号认证解除(抖音身份证号认证不了)

  • 快充耐用还是慢充耐用(快充和慢充哪个耐用)

    快充耐用还是慢充耐用(快充和慢充哪个耐用)

  • iphonex怎么更新ios13(iphonex怎么更新系统不了)

    iphonex怎么更新ios13(iphonex怎么更新系统不了)

  • 美图秀秀怎么加音乐(美图秀秀怎么加水印)

    美图秀秀怎么加音乐(美图秀秀怎么加水印)

  • 电脑连接网线但是无法上网(电脑连接网线但没有网络)

    电脑连接网线但是无法上网(电脑连接网线但没有网络)

  • 聊聊关于图像分割的损失函数 - BCEWithLogitsLoss(图像可以分成哪些类别?)

    聊聊关于图像分割的损失函数 - BCEWithLogitsLoss(图像可以分成哪些类别?)

  • Win11右键图标没反应怎么办?Win11桌面图标右键点不出来的解决方法(win11右键没了)

    Win11右键图标没反应怎么办?Win11桌面图标右键点不出来的解决方法(win11右键没了)

  • 人力资源公司怎么和企业谈合作
  • 向税务局申请发票增量增额怎么写
  • 房产税如何申报流程
  • 企业增值税必须退税吗?
  • 出口退税的账怎么做
  • 无形资产价值评估收费
  • 个人所得税0申报表怎么填
  • 土地增值税二次清算规定
  • 个人代人开普票个税怎么算
  • 以前月份暂估成本怎么冲
  • 一般纳税人销售使用过的固定资产
  • 增值税税率如何计算
  • 建筑公司收到劳务费
  • 车辆购置税免税申报如何操作
  • 企业清算未分配利润不分配要交个税吗
  • 怎么调整应收账款账龄
  • 当月没有销售需要结转成本吗
  • 营改增后取得施工作业收入需要交哪些税?
  • 期末调汇的会计怎么做账
  • 董事费如何计算个人所得税
  • 结转增值税的计算公式
  • 事业编年底
  • 定额发票是需要备注吗
  • 不得核定征收企业所得税的行业
  • 补偿贸易具体方式
  • 申报表作废后怎么显示的是已申报,不能重新申报
  • 公园门票可以开发票吗
  • 餐饮研发费用确认条件
  • 财务科目明细表格模板
  • 调整以前年度应付工资怎么调
  • 税优识别码是纳税人识别号吗
  • 库存商品如何结转生产成本
  • 公司股权转让怎么操作
  • 其他综合收益属于什么科目借贷
  • linux中free命令详解
  • 收外汇的账务处理实例
  • 最早的拍照手机是哪一年
  • 为什么生产工人还要求本科
  • 财政返还土地奖金的规定
  • 小企业会计准则财务报表至少包括
  • 如何免费使用超级简历
  • 活动委托书范本
  • 每个月计提折旧的分录
  • 公司股东与公司往来怎么处理
  • dedecms进入数据库
  • mysql自连接查询各个部门经理的工资
  • 帝国cms怎么调用文章随机段落
  • 员工加班打车费进项可以抵扣吗
  • 吸收合并和新设合并哪个更好
  • 提交表单数据有哪几种方法,php如何获取表单提交的数据
  • 已开票未收到款怎么做账
  • 公司给员工买意外险需要员工出钱吗
  • 捐赠 赞助 区别
  • 车辆处置缴纳增值税税率
  • 委托生产的会计分录
  • 其他非流动资产减少的原因
  • 城建税教育费附加什么时候交
  • 公司账户的钱怎么合理的转出来
  • 免税货物如何开具发票
  • 佣金付给别人公司合法吗
  • 还账准备计提方法
  • 先进先出法实际成本跟成本不一样吗
  • 免征增值税进项税怎么弄
  • 财务票子怎么粘
  • Win10系统开机出现问题pin码不可用
  • macbookpro通知栏
  • linux文本处理实验报告
  • linux基本使用
  • centos安装rz命令
  • scsiaccess.exe - scsiaccess是什么进程 有什么用
  • win8声音小怎么解决
  • jquery-easyui
  • nodejs中向HTTP响应传送进程的输出
  • 使用权资产
  • js脚本使用教程
  • jquery日期控件onchange事件
  • python怎么用的
  • 税控盘状态
  • 北京社保外埠城镇职工和外埠农村劳动力啥区别
  • 金税三期可以申报个税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设