JavaScript实现4位随机验证码的生成


Posted in Javascript onJanuary 28, 2021

本文实例为大家分享了JavaScript生成4位随机验证码的具体代码,供大家参考,具体内容如下

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4位随机验证码的生成</title>
<style>
 label{
 color:aqua;
 float:left;
 font-size: 20px;
 line-height:2em;
 }
 #tex{
 display:inline-block;
 width:50px;
 height: 25px;
 float:left;
 text-align: center;
 font-size:15px;
 margin-top:10px;
 }
 #showyz{
 border:3px solid green;
 color:blue;
 width:90px;
 height:40px;
 text-align:center;
 float:left;
 margin-left:15px;
 line-height: 2.5em;
 
 }
 #hyz{
 background-color:burlywood;
 border:1px solid burlywood;
 width:50px;
 height:20px;
 float: left;
 margin-left:20px;
 margin-top: 10px;
 margin-right:15px;
 }
 #btn{
 
 }
</style>
</head>
<body>
<label for="tex">请输入验证码:</label><input type="text" id="tex" maxlength="4" autofocus>
<div id="showyz"></div>
<div id="hyz">换一张</div><br>
<input type="button" id="btn" value="确认">
</body>
<script>
//定义个空数组保存62个编码
var codes=[];
//将数字对应的编码保存到codes数组中,数字编码范围【48-57】
for(var i=48;i<=57;i++){
 codes.push(i);
}
//将大写字母对应的编码保存到codes数组中,对应编码范围【65-90】
for(var i=65;i<=90;i++){
 codes.push(i);
}
//将小写字母对应的编码保存到codes数组中,对应编码范围【97-122】
for(var i=97;i<=122;i++){
 codes.push(i);
}
//定义个方法生成62位随机数作为数组角标返回随机的编码,再将其编码转化为对应数字或者字母
function suiji(){
var arr=[];//定义个数组保存4位随机数
 for(var i=0;i<4;i++){
 var index=Math.floor(Math.random()*(61-0+1)+0);//生成个随机数
 var char=String.fromCharCode(codes[index]);//解码
 arr.push(char); //存入到数组arr中
}
 return arr.join("");//将数组转为字符串,以空格分隔,并返回
}
var yzm=suiji();//调用方法,将放回的验证码返回到yzm中
//获取上述元素
var tex=document.getElementById("tex");
var showyz=document.getElementById("showyz");
var hyz=document.getElementById("hyz");
var btn=document.getElementById("btn");
//将验证码写入到id为showyz的div中
showyz.innerHTML=yzm;
//实现换一张验证码功能
hyz.οnclick=function(){
 yzm=suiji();
 showyz.innerHTML=yzm;
}
//将自己输入的验证码与获取的随机验证码验证
btn.οnclick=function(){
 var textvalue=tex.value;//获取输入的值
 if(textvalue.toLowerCase()==yzm.toLowerCase()){//将值都转为小写比较
 alert("验证码输入正确!");
 yzm=suiji();
  showyz.innerHTML=yzm;
 tex.value="";
 }
 else{
 alert("验证码输入错误,请重新输入!");
 yzm=suiji();
  showyz.innerHTML=yzm;
 tex.value="";
 }
}
</script>
</html>

JavaScript实现4位随机验证码的生成

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 #Javascript
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
node使用async_hooks模块进行请求追踪
Jan 28 #Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 #Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 #Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
完美的php分页类
2017/10/24 PHP
asp批量修改记录的代码
2008/06/25 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python实现哈希表
2014/02/07 Python
初学Python实用技巧两则
2014/08/29 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python中文竖排显示的方法
2015/07/28 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python assert的用处示例详解
2019/04/01 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
电信营业员自我评价分享
2014/01/17 职场文书
如何写辞职书
2015/02/26 职场文书
2015年三万活动总结
2015/03/25 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL