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

  • 微店小程序里怎么搜索别人的微店(微店小程序怎么弄)

    微店小程序里怎么搜索别人的微店(微店小程序怎么弄)

  • 电脑小广告怎么让它不再出现(电脑小广告怎么能弄干净)

    电脑小广告怎么让它不再出现(电脑小广告怎么能弄干净)

  • 封口机不封口怎么回事(封口机不好用怎么办)

    封口机不封口怎么回事(封口机不好用怎么办)

  • 声卡声音录不到手机里(声卡录不了声音怎么回事)

    声卡声音录不到手机里(声卡录不了声音怎么回事)

  • 苹果8p信号差是网络问题还是手机问题(苹果8p信号差是怎么回事)

    苹果8p信号差是网络问题还是手机问题(苹果8p信号差是怎么回事)

  • ppt内同一个对象可以设置多个动画吗(ppt同一个对象两个动画效果)

    ppt内同一个对象可以设置多个动画吗(ppt同一个对象两个动画效果)

  • 抖音私信已送达对方能看到吗(抖音私信已送达 是对方没有看吗)

    抖音私信已送达对方能看到吗(抖音私信已送达 是对方没有看吗)

  • edl一al10是什么型号(edlal10型是什么手机)

    edl一al10是什么型号(edlal10型是什么手机)

  • 华为笔记本是什么系统(华为笔记本是什么充电协议)

    华为笔记本是什么系统(华为笔记本是什么充电协议)

  • 新开网店没有访客也没有销量怎么办(网店没有人访问怎么办)

    新开网店没有访客也没有销量怎么办(网店没有人访问怎么办)

  • 腾达路由器灯怎么闪才正常(腾达无线路由器灯怎么算正常)

    腾达路由器灯怎么闪才正常(腾达无线路由器灯怎么算正常)

  • 苹果webkit可以全开吗(苹果webkit功能全部打开好吗)

    苹果webkit可以全开吗(苹果webkit功能全部打开好吗)

  • fttb和ftth的不同点(ftth和fttp)

    fttb和ftth的不同点(ftth和fttp)

  • 苹果手机从哪里清理内存(苹果手机从哪里看内存)

    苹果手机从哪里清理内存(苹果手机从哪里看内存)

  • word如何自制封面(word自制封面)

    word如何自制封面(word自制封面)

  • 阿里巴巴的商业模式是什么

    阿里巴巴的商业模式是什么

  • ps圆形路径文字怎么做(ps圆形路径文字怎么调字间距)

    ps圆形路径文字怎么做(ps圆形路径文字怎么调字间距)

  • 微信腾讯会员不能共用吗(腾讯会员不能微信支付?)

    微信腾讯会员不能共用吗(腾讯会员不能微信支付?)

  • 苹果手机nfc功能在哪里(苹果手机nfc功能怎么使用门禁卡)

    苹果手机nfc功能在哪里(苹果手机nfc功能怎么使用门禁卡)

  • 荣耀10青春版有红外功能吗(荣耀10青春版有红外遥控吗)

    荣耀10青春版有红外功能吗(荣耀10青春版有红外遥控吗)

  • 抖音用自己的流量看不了为什么(抖音自己的流量在哪里看)

    抖音用自己的流量看不了为什么(抖音自己的流量在哪里看)

  • ps去掉图片多余东西(ps图片去掉多余的图案)

    ps去掉图片多余东西(ps图片去掉多余的图案)

  • 小米九的耳机插口在哪里(小米九的耳机插孔在哪)

    小米九的耳机插口在哪里(小米九的耳机插孔在哪)

  • 手机wps怎么分成两栏(手机wps怎么分成两个窗口)

    手机wps怎么分成两栏(手机wps怎么分成两个窗口)

  • 转发别人快手作品步骤(转发别人快手作品都有水印怎么办)

    转发别人快手作品步骤(转发别人快手作品都有水印怎么办)

  • 企业所得税年报申报时间
  • 企业季度所得税计算公式
  • 金税三期系统的作用
  • 车购税怎么计算
  • 公司名下的房产过户到个人要交多少税
  • 广告公司与广告公司合作的协议
  • 无形资产加计扣除最新政策
  • 企业所得税年报过了申报期还能修改吗
  • 公司个人薪金怎么申报宁波
  • 支付宝支付高速公路发票怎么打印
  • 税控服务费减免税款分录
  • 外币购销业务的账务处理
  • 红字发票是否需要写进出仓单里
  • 生产企业电梯维修方案
  • 银行存款收款凭证是原始凭证吗
  • 小规模和一般纳税人的区别
  • 公司收到股东的钱现金流量表怎么填
  • 个体户国税异常怎么办
  • 差额征税进项如何抵扣
  • 出口退税为0的产品明细
  • 营改增后出售以前年度的固定资产怎么申报?
  • 失控发票如何认定
  • 所得税计税方法
  • 个人股权转让个税计算
  • 金蝶标准版年末已经结账如果重新结账
  • 在建工程人工费会计分录
  • 其他债权投资有哪些明细科目
  • 无法连接到移动网络小米
  • PHP:oci_internal_debug()的用法_Oracle函数
  • vue前端开发规范
  • 出售固定资产净收益影响营业利润吗
  • 房产税城镇土地使用税申报期限
  • javaweb学生信息管理系统idea
  • 关于猿猴的作文
  • ip6tables-save命令 保存ip6tables表配置
  • 企业的营业税金及附加
  • 存根联明细是自动生成
  • 开了银行对公账户要多久
  • 出口生产型企业
  • java基础介绍
  • 计提增值税的会计凭证
  • 国债收益率如何查看
  • 收到项目资本金入什么科目
  • 小规模纳税人企业所得税税收优惠政策
  • 残保金计算公式及例题
  • 无形资产如何计提减值
  • 企业的借款利息费用,扣除标准是?
  • 财政收据使用范围
  • 预收账款核算如何做账
  • 车保险说给返钱是真的吗
  • 陪标收费标准
  • 收到去年所得税退税款会计分录
  • mysql怎么设置自增主键
  • 如何远程重装系统教程
  • ubuntu桌面版安装教程
  • windows media player在播放文件时遇到问题怎么解决
  • xp系统电脑开机密码忘记了
  • linux的截图工具
  • ubuntu20安装unity桌面
  • node.js可以跨平台吗
  • 绝对给力的超经典
  • css教程推荐
  • perl chr
  • perl语句
  • 深入理解javascript pdf
  • python制作windows安装程序
  • python第三方库文档怎么看
  • 安卓中的HTTP编程
  • python元祖内置函数
  • jquery实现自动轮播
  • python网络爬虫项目步骤
  • python搭建网页
  • javascript用什么运行
  • python正则函数
  • recyclerview stableid
  • 党建引领结对共建生态
  • 新疆12366网上办税
  • 江苏单位医保如何查询
  • 个人所得税法实施条例2011
  • 山西省税务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设