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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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递归函数返回值使用方法
2013/02/18 PHP
php查看网页源代码的方法
2015/03/13 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue实现搜索功能
2019/05/28 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
利用aardio给python编写图形界面
2017/08/21 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python range实例用法分享
2020/02/06 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
中英双版中文教师求职信
2013/10/27 职场文书
大学生表扬信范文
2014/01/09 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
2014年质量工作总结
2014/11/22 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS