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

  • 服装加工费税收编码
  • 代收代缴个人所得税手续费
  • 税后经营净利润加折旧与摊销
  • 备用金要用发票做账吗
  • 工资出现负数怎么申报个税
  • 收到工程服务费会计分录
  • 交易性金融资产有哪些
  • 企业会计准则季报报送哪几个报表
  • 一般纳税人用金蝶新建账套用什么会计制度好
  • 退回投资款转为借款怎么记账
  • 同一控制下企业合并报表编制
  • 房地产开发企业会计科目
  • 股权转让溢价部分怎么做分录
  • 服装厂里面
  • 证券清算款是什么科目
  • 存货跌价卖出需要进项转出吗
  • 进口关税专用缴款书怎么做分录
  • 上海市购销合同印花税计税金额怎么算?
  • 开增值税票需要对方什么资料
  • 待处理财产损益科目
  • 印花税加工承揽税率
  • 什么情况下可以收取现金
  • 对方开具红字发票过来怎么做进项税转出
  • 工业企业销售管理制度
  • 享受免税的企业每月直接零申报吗
  • 技术转让时增值税怎么算
  • 审计报告与汇缴报告
  • 会计主管人员应该具备的基本条件
  • 电脑自动更新系统
  • 已认证未付款可以退款吗
  • 新成立股份有限公司股本构成
  • 销售额是否含税?
  • 不动产经营租赁包括哪些内容
  • ctfmon.exe文件在哪
  • 房产税的计税依据的形式包括
  • 已提减值准备的固定资产报废怎么填写
  • 个体户未达起征点需要申报吗
  • 研发费用加计扣除新税收政策2023
  • 小程序报错怎么解决
  • Web前端开发用什么软件
  • 其他综合收益的构成项目如何
  • 女方结婚申请
  • pytorch go
  • laravel 分页 api
  • 单位社保年底清算
  • 如何更改电子税务局办税人员
  • 商品出入库台账
  • sqlserver英文发音
  • 现代服务税目包括哪些具体分类
  • MYSQL administrator 使用
  • sqlserver时间格式化时分秒
  • 公司贷款 利息
  • 权益法和成本法的适用范围
  • 采购人员差旅费为什么不计入成本
  • 明细分类账户的名称,核算内容及使用方法是什么规定的
  • 费用暂估入账后期如何冲销
  • 财务费用结转时会计分录
  • 年末资产减值损失可以税前扣除吗
  • 员工休产假不发工资违法吗
  • 快递费用是否可以开发票
  • 小规模季度没超过45万怎么纳税增值税
  • 防伪税控服务费全额抵扣政策
  • mysql5.5怎么用
  • mac安装mysql的两种方法(含配置)
  • sql行变列有几种方法
  • [视频]看科学家如何将纯净水变成金属
  • xp系统百度
  • linux使用pip
  • cmd命令符大全
  • linux 文件查看
  • linux开启samba服务
  • 开机需要两次
  • html怎么用javascript
  • js常用排序算法
  • ztree重新加载数据
  • python3m
  • 简单的智能家居
  • bootstrap layer弹框
  • javascript面向对象编程指南第三版
  • 福州税务局几点关门
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设