js实现随机8位验证码

开发思路：

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>

出现的验证码

当输入正确验证码时

当没输入错误验证码时

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现点击获取验证码倒计时效果

    js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • JS制作图形验证码实现代码

    JS制作图形验证码实现代码

    第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) 路由层描述 /** 供货商店铺-店铺简介 */ //1-在路由层进行设置,页面跳转到根目录下/buyer/vshop/info.ejs

  • JS/jQ实现免费获取手机验证码倒计时效果

    JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

  • js生成的验证码的实现与技术分析

    分享给大家一段js生成验证码并验证的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

  • js生成验证码并直接在前端判断

    js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function cr

  • Jsp生成页面验证码的方法[附代码]

    image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下:  复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

  • JavaScript 验证码的实例代码(附效果图)

    JavaScript 验证码的实例代码(附效果图)

    效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">    <title></title>    <style type="text/css">    .code    {            background:url(code_bg.jpg);            f

  • js实现简单的验证码

    js实现简单的验证码

    验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆.验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助. 运行效果图: 代码如下: <html> <head> <title>js验证码</title> <style type="text/css"> .code { background:url(code_bg.jpg); font-family:Ar

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

随机推荐