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

  • 一般纳税人预缴税款几个点
  • 收到上年度所得税返还会计分录
  • 个体工商户怎么年报
  • 增值税销项税额账务处理
  • 印花税技术合同计税依据
  • 固定资产一次性折旧的账务处理和税务处理
  • 小微自开专票申报时怎么填写
  • 出纳个人账户转公户
  • 小规模销售免税农产品的分录
  • 软件开发里面的人天
  • 股东费用如何入账
  • 哪些财务指标可以用于判断一个企业即将发生财务危机
  • 从业人数和资产总额是灰色
  • 自制原始凭证和原始凭证的区别
  • 支票去银行怎么进账
  • 汽车销售行业印花税问题和对策
  • 奖金做预发年底结算缴税怎么做?
  • 支付开票税款计入什么科目
  • 小规模纳税人普票可以开3%吗
  • 关于工商年检社保的通知
  • 卫生巾的税率
  • 固定资产出售怎么做账
  • 公司注销后是不是就不再接受诉讼
  • 取得土地的流程
  • 软件开发过程中必须伴有质量保证活动
  • 增值税留抵税额在借方还是贷方
  • 修改bios设置
  • 小程序嵌入h5页面可以不写安全地址吗为什么
  • 销售折让负数发票如何入账
  • php跨域解决方案
  • php log函数
  • 企业员工的工资设定标准
  • 未确认融资费用借贷方向
  • 治疗孩子咳嗽小秘方,超实用
  • springboot整合ssm
  • 工会经费计提分录怎么写
  • 农产品加计扣除1%怎么计算和会计分录
  • 电子承兑非拒付追索待清偿
  • 销售后返现怎么算
  • 预付账款后收到货物会计分录
  • 车间用的液化气计入什么科目
  • mysql详细教程
  • mysql查询性能优化
  • 织梦logo
  • 年终奖怎么缴纳
  • 培训费发票开具的要求有?
  • 职工短期薪酬包括哪些
  • 劳务报酬的个人所得税
  • 管理费用的纳税调整
  • 个人所得税的计算标准
  • 支付给职工以及为职工支付的现金增加说明什么
  • 固定资产一次计提折旧
  • 采购原材料怎么做分录
  • 股东投资方式有哪些
  • 事业单位职工福利费计提标准和使用
  • 折扣怎么写会计分录
  • 什么是资产处置收益
  • 新医院会计制度什么时候实施
  • 为什么到期一次还本付息要用债权投资利息调整
  • sql语句查询有多少条数据
  • service login
  • windows写字板功能
  • 惠普台式笔记本一体机电脑bios中文
  • 经典璧纸
  • 在u盘安装软件插上就能用
  • azipmd5.exe是什么
  • 写出10个linux系统操作命令和用法
  • android图形
  • 在dos中文件是以什么目录结构
  • opengl glbegin
  • qq自动登出
  • javascript教程完整版
  • js全选和全不选效果复选框
  • python3 django教程
  • jquery获取指定元素
  • javascript面向对象精要pdf
  • 如何查询自己公司的对公账号
  • 如何计算白酒的出酒率
  • 民办非营利医院所得税
  • 世界近代史的改革有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设