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 相关文章推荐
浅谈JavaScript数据类型
Mar 03 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
es6函数之尾递归用法实例分析
Apr 25 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
JS 统计时间
2021/03/09 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
在Python下尝试多线程编程
2015/04/28 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
师范生个人推荐信
2013/11/29 职场文书
大学生学习自我评价
2014/01/13 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
一句话工作感言
2014/03/01 职场文书
2015大学迎新标语
2015/07/16 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js