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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
TypeScript入门-接口
Mar 30 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP闭包实例解析
2014/09/08 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PHP中常用的魔术方法
2017/04/28 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python实现类继承实例
2014/07/04 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
详解python编译器和解释器的区别
2019/06/24 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
党校自我鉴定范文
2013/10/02 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
医药销售求职信范文
2014/02/01 职场文书
挂牌仪式主持词
2014/03/20 职场文书
排查整治工作方案
2014/06/09 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python