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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
8个必备的PHP功能实例代码
2013/10/27 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
JS中递归函数
2016/06/17 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
详细介绍Ruby中的正则表达式
2015/04/10 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python中pickle模块浅析
2020/12/29 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
医科大学生的自我评价
2013/12/04 职场文书
小学信息技术教学反思
2014/02/10 职场文书
移风易俗倡议书
2014/04/15 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
刑事上诉状范文
2015/05/22 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers