js实现随机8位验证码


Posted in Javascript onJuly 24, 2020

开发思路:

1.画出放置验证码的模块、一个写有“看不清…”的小块,以及输入验证码的文本框
2.获取各个模块
3.封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文。每种类型出现的可能性为25%。
4.随机数字在0-9,之间。对Math.ramand()向下取整。
5.随机大小写字母使用fromCharCode() 方法:将 Unicode 编码转为一个字符,例如:

var n = String.fromCharCode(65);
cosole.log(n);
//输出j结果为A

大写字母(65-91) 小写字母(97-123)

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));

6.随机中文,声明变量letter放置中文字符串,使用charAt()随机在letter中获得某个汉字。

var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
var s = letter.charAt(Math.floor(Math.random() * letter.length));

7.给每位验证码设随机的颜色,字体大小,相对文本位置,旋转角度。给颜色封装一个函数,使用十六进制颜色(如:#ffffff)

//随机颜色
 function fontcolor(){
  var s1="";
  for(var k=0;k<6;k++){
   var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
   var m=z[Math.floor(Math.random() * z.length)];
   s1 +=m;
  }
  return "#"+s1;
  }

随机位置和随机旋转角度的方法相同

随机位置可能为向上下左右偏移 8px, 随机旋转角度可能为绕着z轴旋转(±45度)。

8.提前声明一个空字符串 str 让每位验证码用字符串连接起来.

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
 arr+=s;

9.让8位验证码出现在第一个大模块中的innerHTML中。

10.给写有“看不清”的span标签添加点击事件,点击时,调用函数Yan_ma,刷新验证码。

11.如果输入的验证码不正确,则弹出“验证成功”,否则弹出“验证失败”。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>随机验证码</title>
 <script>
 var arr="";
 window.onload=function() {
  var maa = document.getElementsByClassName("block")[0];
  var looking = document.getElementById("look");
  var put = document.getElementById("text");
  var btnn = document.getElementById("btn");
  Yan_ma(maa);
  looking.onclick=function (){
  Yan_ma(maa);
  };
  btnn.onclick=function(){
  if(put.value.toLowerCase()==arr.toLowerCase()){
   alert ("验证成功");
  }
  else{
   alert ("验证失败");
   Yan_ma(maa);
  }
  }

 };


  function Yan_ma(aim) {
  arr ="";
  var str="";
  for (var i = 0; i < 8; i++) {
   //随机数 Math.random 0-1 的随机值
   var n = Math.random();
   //随机颜色
   var color=fontcolor();
   //随机大小
   var size=Math.floor (Math.random ()*12 +20);
   //随机位置
   var g=Math.random() <0.5 ? -1: 1;
   var topset=Math.random ()*g*8;
   //随机旋转
   var h=Math.random() <0.5 ? -1: 1;
   var zhuan=Math.random ()*h*45;
   if (n < 0.25) {
   //随机数字
   var s = Math.floor(Math.random() * 10);
   str+="<span style='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
   arr+=s;
   }
   //随机大写字母 //65-91
   else if (n >= 0.25 && n < 0.5) {
   var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
   str+="<span style='transform:rotatez("+ zhuan +"deg); left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
   arr+=s;
   }
   //随机小写字母 97-123
   else if (n >=0.5 && n < 0.75) {
   var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
   str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
   arr+=s;
   }
   //随机文字
   else {
   var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
   var s = letter.charAt(Math.floor(Math.random() * letter.length));
   str+="<span style='transform: rotatez("+ zhuan +" deg) ; left:"+topset+"px; color: " +color +";font-size:"+size+"px;top:"+topset+"px '>"+s+"</span>";
   arr+=s;
   }
  }
  aim.innerHTML =str;
  }

  function fontcolor(){
  var s1="";
  for(var k=0;k<6;k++){
   var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
   var m=z[Math.floor(Math.random() * z.length)];
   s1 +=m;
  }
  return "#"+s1;
  }

 </script>
 <style>
 .block{
  width:250px;
  height:60px;
  background:url("bg2.png") no-repeat center;
  background-size: 100%;
  text-align: center;
  line-height: 60px;
 }
 .block span{
  position: relative;
  display: inline-block;
  width:20px;
  margin:5px 3px;
 }
 #look{
  color: #9200ff;
 }
 #look:hover{
  cursor: pointer;
 }
 </style>
</head>
<body>
<div class="block">
</div>
<span id="look">看不清...</span>
<br/>
<input type="text" id="text" placeholder="请输入验证码" />
<button id="btn">验证</button>
</body>
</html>

出现的验证码

js实现随机8位验证码

当输入正确验证码时

js实现随机8位验证码

当没输入错误验证码时

js实现随机8位验证码

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

Javascript 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
javascript相关事件的几个概念
May 21 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Vue中全局变量的定义和使用
Jun 05 #Javascript
详解express使用vue-router的history踩坑
Jun 05 #Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 #Javascript
用webpack4开发小程序的实现方法
Jun 04 #Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
JS数组中对象去重操作示例
Jun 04 #Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
You might like
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Python 实现微信自动回复的方法
2020/09/11 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
本科生个人求职自荐信
2013/09/26 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
小学班主任寄语大全
2014/04/04 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
二婚主持词
2015/06/30 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python