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前台数据获取实现代码
Mar 16 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
javascript实现智能手环时间显示
Sep 18 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
PHP 可阅读随机字符串代码
2010/05/26 PHP
php数组查找函数总结
2014/11/18 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php实现网站留言板功能
2015/11/04 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
微信小程序实现发红包功能
2018/07/11 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
vue实现拖拽效果
2019/12/23 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
微信小程序实现列表左右滑动
2020/11/19 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Python语法快速入门指南
2015/10/12 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
上课玩手机检讨书
2014/02/08 职场文书
我的理想演讲稿
2014/04/30 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
法院执行局工作总结
2015/08/11 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
python中pandas对多列进行分组统计的实现
2021/06/18 Python