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

  • js url(js url编码)

    js url(js url编码)

  • 网易云取消收藏歌单的方法是什么(网易云取消收藏的歌怎么找回)

    网易云取消收藏歌单的方法是什么(网易云取消收藏的歌怎么找回)

  • 没有拔键器怎么取键帽(没有拔键器怎么取轴)

    没有拔键器怎么取键帽(没有拔键器怎么取轴)

  • 局域网连接不上怎么办(局域网连接不上另一台电脑)

    局域网连接不上怎么办(局域网连接不上另一台电脑)

  • 钉钉外勤打卡是什么意思(钉钉外勤打卡是不是在哪里都可以)

    钉钉外勤打卡是什么意思(钉钉外勤打卡是不是在哪里都可以)

  • 抖音短视频没有播放量怎么回事(抖音短视频没有数据分析怎么回事)

    抖音短视频没有播放量怎么回事(抖音短视频没有数据分析怎么回事)

  • 京东手机合约版是什么意思(京东手机合约版是什么)

    京东手机合约版是什么意思(京东手机合约版是什么)

  • 什么是数据库安全的第一保障(什么是数据库安全性?DBMS有哪些安全措施)

    什么是数据库安全的第一保障(什么是数据库安全性?DBMS有哪些安全措施)

  • 艺术字四周型环绕怎么设置(艺术字体四周型环绕)

    艺术字四周型环绕怎么设置(艺术字体四周型环绕)

  • 用ps需要网络吗(ps的使用需要网络吗)

    用ps需要网络吗(ps的使用需要网络吗)

  • 小米9pro熄屏时间怎么设置

    小米9pro熄屏时间怎么设置

  • 快手看不见关注人直播(快手看不见关注和粉丝)

    快手看不见关注人直播(快手看不见关注和粉丝)

  • 高德地图怎么开启横屏(高德地图怎么开电子发票)

    高德地图怎么开启横屏(高德地图怎么开电子发票)

  • oppoa57充电呼吸灯亮吗(oppoa57充电呼吸灯怎么设置)

    oppoa57充电呼吸灯亮吗(oppoa57充电呼吸灯怎么设置)

  • 荣耀v20怎么清除后台程序(荣耀v20怎么清除缓存)

    荣耀v20怎么清除后台程序(荣耀v20怎么清除缓存)

  • 华为怎么连车usb放歌(华为怎么连车上的carplay)

    华为怎么连车usb放歌(华为怎么连车上的carplay)

  • 拼多多开通了月卡怎么取消(拼多多开通了月卡会员怎么取消)

    拼多多开通了月卡怎么取消(拼多多开通了月卡会员怎么取消)

  • 拼多多上面的货号在哪里(拼多多上面的货到付款怎么关闭)

    拼多多上面的货号在哪里(拼多多上面的货到付款怎么关闭)

  • 网易云音乐为什么下载失败(网易云音乐为什么版权越来越少)

    网易云音乐为什么下载失败(网易云音乐为什么版权越来越少)

  • 微信如何更改启动画面(微信如何更改启动界面)

    微信如何更改启动画面(微信如何更改启动界面)

  • 抖音直播怎么放歌(抖音直播怎么放歌曲给别人听)

    抖音直播怎么放歌(抖音直播怎么放歌曲给别人听)

  • 微信右下角有个蓝勾怎么取消(微信右下角有个蓝勾怎么回事)

    微信右下角有个蓝勾怎么取消(微信右下角有个蓝勾怎么回事)

  • 小米8通话听筒声音小(小米8通话听筒小 微信电话正常)

    小米8通话听筒声音小(小米8通话听筒小 微信电话正常)

  • 增值税计入成本吗?
  • 做账报税简单吗
  • 印花税是什么时候交的钱
  • 私车公用如何处理
  • 期间损益结转错误怎么冲销
  • 报税成本费用怎么填
  • 利润为负数利润增长率怎么算
  • 个人到税务局开发票要带什么东西
  • 如何在电子税务局开发票
  • 产品成本核算需要经过哪些程序
  • 材料采购合同要盖章吗
  • 社保滞纳金可以计入管理费用吗为什么
  • 酒店代金券使用规则
  • 快递费的进项税可以抵扣吗
  • 知识产权服务项目
  • 会计代理服务是什么行业
  • 供热企业免税收入标准
  • 出口企业增值税怎么算
  • 金融服务收入怎么算
  • 广播影视服务需要交文化事业建设费吗
  • 在Win7系统中,文件的属性包括
  • 盘盈的固定资产怎么做账务处理
  • 增值税免税项目和免征增值税的区别
  • php技巧
  • 服务业结转成本与收入如何配比
  • php变量设置
  • window10安装教程u盘
  • macOS 10.13允许任何来源没有了怎么办?macOS 10.13允许任何来源没了开启步骤
  • php数组函数 菜鸟
  • 交暖气费可以开单位发票吗
  • 不能加载axf文件
  • 公司的房租收入要交税吗
  • php solr
  • 广告费列支
  • flask 教程
  • php strncmp
  • 发票没有填写开户行,可以报销吗
  • 缴税的会计处理
  • 小微企业短小频急
  • 有下列情形之一的,当事人可以解除
  • 利用职务之便谋取私利是什么罪
  • 企业研发费用加计扣除比例
  • 普通的收据可以入账吗
  • 科技专项资金
  • 调整以前年度销项税额的分录
  • 纳税人将外购的货物用于非应税项目
  • 增值税年末必须要交吗
  • 发票报销流程和条件
  • 金税盘如何查看是否清卡
  • 公司网站维护费用计哪个科目
  • 增值税结转是月结转还是年度
  • 税收会计采用什么记账法
  • xp系统的电脑无法启动
  • 怎么提升mac性能
  • rundll32.exe是病毒吗
  • win10系统开机蓝屏得重启后才能开机
  • centos soft lockup
  • win7文件访问被拒绝怎么办
  • iptables centos
  • perl中splice
  • unity判断点击ui
  • 原生java web
  • 哈希表rehash
  • js移动到指定位置
  • ruby 递归
  • pycharm打开文件怎么运行
  • python视频下载
  • 用javascript
  • 浅谈jquery中next与siblings的区别
  • js与jquery的关系
  • Android Padding Margn记录
  • 半透明图层怎么制作
  • python访问oracle
  • js回调函数应用场景
  • jquery 触发点击
  • 审计会计税务的区别及联系
  • 外商投资的企业
  • 山东省级高新区什么级别
  • 税是每个人都要交的吗
  • 深圳国税系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设