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

  • 智能机怎么省电(智能机怎么刷机)(手机怎么样省电功能)

    智能机怎么省电(智能机怎么刷机)(手机怎么样省电功能)

  • iqooz5x支持5g吗

    iqooz5x支持5g吗

  • 华为p40跟p40pro对比(华为p40与p40pro)

    华为p40跟p40pro对比(华为p40与p40pro)

  • iphone11的运行内存(iphone11的运行内存怎么看)

    iphone11的运行内存(iphone11的运行内存怎么看)

  • 美团删除评价分会回升吗(美团评价删除评分会重新计算吗)

    美团删除评价分会回升吗(美团评价删除评分会重新计算吗)

  • 华为查找我的手机总是离线(华为查找我的手机定位不了是什么原因)

    华为查找我的手机总是离线(华为查找我的手机定位不了是什么原因)

  • iphone11人脸识别一直转(iphone11人脸识别不灵敏)

    iphone11人脸识别一直转(iphone11人脸识别不灵敏)

  • 探探注销账号后,个人信息还会在吗(探探注销账号后照片看得到吗)

    探探注销账号后,个人信息还会在吗(探探注销账号后照片看得到吗)

  • 淘宝怎么改个人信息(淘宝如何改自己的名字)

    淘宝怎么改个人信息(淘宝如何改自己的名字)

  • 演示机和正常机的区别(演示机和正常机哪个好)

    演示机和正常机的区别(演示机和正常机哪个好)

  • 京东过年期间发快递吗(京东过年期间发货吗)

    京东过年期间发快递吗(京东过年期间发货吗)

  • 微信怎么设置置顶好友(微信怎么设置置顶聊天)

    微信怎么设置置顶好友(微信怎么设置置顶聊天)

  • 华为手机截屏怎么操作(华为手机截屏怎么弄长截屏)

    华为手机截屏怎么操作(华为手机截屏怎么弄长截屏)

  • 绿联18w快充伤电池吗(绿联18wpd快充)

    绿联18w快充伤电池吗(绿联18wpd快充)

  • 1600mb等于多少g内存(1600mb是多少g)

    1600mb等于多少g内存(1600mb是多少g)

  • pbcm10是什么型号机型(pbcm10是什么型号机型图片)

    pbcm10是什么型号机型(pbcm10是什么型号机型图片)

  • 抖音被拉黑还能艾特对方吗(抖音被拉黑还能发私信吗?)

    抖音被拉黑还能艾特对方吗(抖音被拉黑还能发私信吗?)

  • 荣耀9plus有nfc功能吗(华为荣耀9带nfc)

    荣耀9plus有nfc功能吗(华为荣耀9带nfc)

  • qq被冻结了怎么办(qq被冻结了怎么看解冻时间)

    qq被冻结了怎么办(qq被冻结了怎么看解冻时间)

  • space是什么键(cfbackspace是什么键)

    space是什么键(cfbackspace是什么键)

  • nex后盖更换教程(nexa后盖更换教程)

    nex后盖更换教程(nexa后盖更换教程)

  • 抖音怎么拒绝别人艾特(抖音怎么拒绝别人访问主页)

    抖音怎么拒绝别人艾特(抖音怎么拒绝别人访问主页)

  • oppo如何关机(oppo如何关机要密码)

    oppo如何关机(oppo如何关机要密码)

  • 电脑开机弹出documents文件夹解决方法(电脑开机弹出documents文件夹)

    电脑开机弹出documents文件夹解决方法(电脑开机弹出documents文件夹)

  • 原生JS的拖拽属性draggable(详解)(js实现拖拽选区的功能)

    原生JS的拖拽属性draggable(详解)(js实现拖拽选区的功能)

  • 长期待摊费用一般指什么
  • 会费收入增值税申报
  • 个人所得税谁交
  • 报销单用法
  • 押金收不回来没钱怎么办
  • 一般纳税人符合条件
  • 湖北工会工作网
  • 养老险的基数
  • 民间非营利组织会计制度最新版
  • 汇算清缴职工福利支出
  • 管理费用 结转
  • 注册资本金印花税什么时候缴纳
  • 财产租赁所得应缴纳个人所得税
  • 企业如何认定
  • 企业为职工支付的家庭财产保险
  • 甲公司聘用乙为业务经理
  • 房地产企业开发资质等级
  • 物业公司代收电费会计分录
  • 全资子公司效益怎么算
  • 白条入账会给什么处分
  • 鸿蒙超级终端搜不到
  • 华为mate刷机能刷用户锁吗
  • 在win7系统中如何让电脑恢复出厂设置方法
  • 苹果系统中怎么删除软件
  • linux系统中如何查看日志
  • linuxssh免密登录
  • 计提本月应缴纳的所得税
  • 计划成本法和实际成本法区别
  • 收回前欠货款会导致资产总额增加吗
  • 银行代发工资会计科目怎么写
  • PHP:imagecolorclosestalpha()的用法_GD库图像处理函数
  • 工业企业采购部工作职责
  • 解决烧心最快方法
  • 会计准则对企业行为的影响分析论文
  • 浅谈php表单提交的问题
  • pytorch基础教程
  • 魔改apk
  • win+e快捷键在哪
  • 浅谈建筑地基基础加固施工技术亲
  • 广告模板网站
  • tracet命令
  • 四舍五入的弊端
  • 无偿划转法律意见
  • 残疾人个人所得税减免怎么填写申报
  • 帝国cms适合个人用吗
  • 房地产企业开发的已出租的房屋属于投资性房地产吗
  • 管理费用属于产品成本么
  • SqlServer 2005/2008数据库被标记为“可疑”的解决办法
  • 预缴了增值税在申报增值税时申报
  • 车辆使用费怎么算
  • 长期借款和长期贷款一样吗
  • 高价购买股权
  • 对公账户转账给法人怎么做账
  • 固定资产转为投资的条件
  • 小规模纳税人公户转私户可以吗
  • 费用报销银行转账用途怎么写
  • 建账的过程包括哪些内容
  • sql union和join区别
  • Linux下mysql5.6.33安装配置教程
  • VirtualBox虚拟机中文免费
  • 电脑上view是什么意思
  • windows10mobile官网
  • w8系统怎么连接投影仪
  • win8.1无法安装vmware tools
  • surface使用
  • ubuntu 编译ffmpeg
  • css做一个好看的网页
  • django框架mvt
  • unity g
  • Linux进程通信(IPC)方式简介
  • js 不用var
  • 使用jquery实现的项目
  • android shareuid
  • setBackgroundDrawable和setBackgroundColor的用法
  • 保险是不是跟车走
  • 国家税务总局里面怎么改办税人
  • 国税局巡察整改方案
  • 地税干部
  • 建筑安装工程承包条例还有效吗
  • 税控机发票打印机怎么用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设