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 相关文章推荐
js验证模型自我实现的具体方法
Jun 21 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
vue.js的安装方法
May 12 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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中将网址转换为超链接的函数
2011/09/02 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python生成ppt的方法
2018/06/07 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
基于Python测试程序是否有错误
2020/05/16 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python 8种必备的gui库
2020/08/27 Python
Python识别验证码的实现示例
2020/09/30 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
护士实习求职信
2014/06/22 职场文书
财务管理专业自荐书
2014/09/02 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
期末个人总结范文
2015/02/13 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL