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>

出现的验证码

当输入正确验证码时

当没输入错误验证码时

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

时间: 2019-06-04

js实现简单的验证码

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

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

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

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

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制作图形验证码实现代码

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

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

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

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

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>

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

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

JAVA实现利用第三方平台发送短信验证码

前段时间自己做的一个小项目中,涉及到用短信验证码登录.注册的问题,之前没涉及过这一块,看了别人的博客其实也是似懂非懂的,现在就将自己做的利用第三方短信平台来发送验证码这个功能记下来. 本文以注册为例,在SpringMVC+Spring+Mybatis框架的基础上完成该短信验证码功能. 发送短信验证码的原理是:随机生成一个6位数字,将该6位数字保存到session当中,客户端通过sessionid判断对应的session,用户输入的验证码再与session记录的验证码进行比较. 为了防止有广告嫌疑

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

Laravel框架实现发送短信验证功能代码

Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. Laravel短信验证思路详解 今天在做到用户注册和个人中心的安全管理时,我实现借助第三方短信平台在Laravel框架中进行手机验证的设置; 由于我做的是一个为客户提供医疗咨询和保健品网站,所以我们对客户个人隐私的保护显得尤为重要,因而在客户登录后进入个人中心前,

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

jQuery插件开发发送短信倒计时功能代码

实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>

jQuery实现倒计时重新发送短信验证码功能示例

本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown

Android用 Mob 实现发送短信验证码实例

和室友参加的互联网大赛要做一个 APP,涉及到用户的登录注册,于是上网找了许多资料,其中有阿里大于,网易云等等,阿里大于的客服给我说他们不支持 Android,网易云还要拍手持身份证的照片,而且这两个都收费,还麻烦,于是找了一个既简单有免费的,叫做 Mob,官网如下 Mob 官网 官方文档看了很多,还是觉得写的不好,于是自己写一篇. 注册账号 在 Mob 官网右上角点击注册,依次填入信息,其中公司一栏可以随便填 添加应用 登录后,点击 SecurityCodeSDK - 立即使用,Mob 会提示

Java实现发送短信验证码功能

一个发送短信验证码的功能,使用的是信易通的短信平台接口,然后在Java中使用HttpClient模拟POST请求或者GET请求(看短信平台要求,一般的情况下都是POST请求),调用短信平台提供的接口(遵循短信平台的接口规范即可).具体看代码: 使用HttpClient的时候需要在项目中引入: commons-httpclient-3.1.jar 这个jar包, 项目结构: 1.创建一个Http的模拟请求工具类,然后写一个POST方法或者GET方法 /** * 文件说明 * @Descriptio

JS 实现发送短信验证码的“59秒后重新发送验证短信”功能

倒计时--从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text" value="10" id="txt"> <input type="button" value="重新开始" id="btn"> </body> <script&