js+canvas实现验证码功能

刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下:

主要代码如下:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
  <div class="wrapper">
    <div class="inputBox">
      <input type="text" class = 'inputCaptcha' placeholder = "请输入验证码">
      <span class="captchaIcon"></span>
    </div>
    <p class="errorText"></p>
    <div class="canvasBox">
      <div class="imageBox">
        <canvas width =300 height=80 id = 'canvasCaptcha'></canvas>
        <input type="button" class='refresh'>
      </div>
    </div>
    <button class="captchaSubmit">submit</button>
  </div>
  <script src='./jquery.js'></script>
  <script src = './index.js'></script>
</body>
</html>

css

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 345px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px 10px;
  margin: 30px 30px;
}

.inputBox {
  width: 345px;
  margin: 0 auto 10px;
  position: relative;
}

.inputBox .inputCaptcha {
  display: inline-block;
  height: 50px;
  width: 86%;
  text-indent: 1em;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.inputBox .captchaIcon {
  display: none;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -16px;
  width: 32px;
  height: 32px;
  background-size: 100% 100%;
}

.errorText {
  width: 345px;
  margin: 0 auto;
  font-size: 12px;
  color: red;
  display: none;
}

.canvasBox {
  width: 345px;
  margin: 10px auto;
  position: relative;
}

#canvasCaptcha {
  border-radius: 10px;
}

.canvasBox .refresh {
  width: 34px;
  height: 34px;
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -17px;
  border: 0;
  border-radius: 6px;
  background-image: url('./images/update.png');
  background-size: cover;
}

.captchaSubmit {
  padding: 10px 20px;
  background-color: #62b900;
  border: 0;
  font-size: 20px;
  border-radius: 5px;
  color: #fff;
}

js

var arr = [0,1,2,3,4,5,6,7,8,9];
for(var i = 65;i < 122;i++){
  if(i>90&&i<97){
    continue;
  }
  arr.push(String.fromCharCode(i));
}
//每个验证码可能出现的字母或数字(区分大小写)
var len = arr.length;
//验证码的长度
var canvasStr,value;
//验证码值
function createCanvas(){
  canvasStr = '';
  value = '';
  for(var i =0 ;i < 6;i++){
    var a = arr[Math.floor(Math.random()*len)];
    canvasStr += a+' ';
    value += a;
  }
//canvas
  var oCanvas = document.getElementById('canvasCaptcha');
  var ctx = oCanvas.getContext('2d');
  var w = oCanvas.width;
  var h = oCanvas.height;
  var oImg = new Image();
  oImg.src = './images/bg.jpg';
  oImg.onload = function(){
    var pattern = ctx.createPattern(oImg,'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0,0,w,h);
    ctx.fillStyle = '#ccc';
    ctx.textAlign = 'center';
    ctx.font = '46px Roboto Slab';
    ctx.setTransform(1,-0.12,0.2,1,0,12);
    ctx.fillText(canvasStr,w/2,60);
  }
}

createCanvas();

//验证输入的验证码与图中验证码时候相等
function captcha(e){
  if(e == value){
    return true;
  }
  else{
    return false;
  }
}

//点击提交按钮时的结果
function showResult(){
  var inputValue = $('.inputCaptcha').val();

  if(inputValue == '' ||inputValue == null || inputValue == 'undefined'){
    $('.errorText').css({display:'inline-block'}).html('验证码不能为空,请重新输入!');
    $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/false.png')"});
  }else{
    var flag = captcha(inputValue);
    if(!flag){
      $('.errorText').css({display:'inline-block'}).html('验证码错误,请重新输入!');
      $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/false.png')"});
    }else{
      $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/true.png')"});
    }
  }
}
$('.captchaSubmit').click(showResult);//提交
$('.refresh').click(createCanvas);//刷新
//点击input框
$('.inputCaptcha').focus(function(){
  $('.errorText').add($('.captchaIcon')).fadeOut(100);
})

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

(0)

相关推荐

  • 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

  • JavaScript生成验证码并实现验证功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <title>验证码</title> <style type="text/css"> #code { font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; } </style> <scri

  • JS+HTML5 canvas绘制验证码示例

    本文实例讲述了JS+HTML5 canvas绘制验证码.分享给大家供大家参考,具体如下: css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> HTML部分: body中添加标签canvas: <canvas id="c3"></canvas> js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h =

  • JavaScript Canvas实现验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SVG也可以绘制验证码. 绘制验证码不能是简单的随机字符串,而应该在绘制界面有一些干扰项: 如:干扰线段.干扰圆点.背景等等. 这里的这个demo的canvas验证码干扰项比较简单. 可以在图示中看到本例中的干扰项. canvas验证码展示效果: 点击实现改变(重绘)验证码: 在控制台运行函数输出返回值

  • JS+HTML5实现获取手机验证码倒计时按钮

    效果图如下所示: HTML: <input type="button" value="获取验证码"> CSS: input[type=button] width: 150px; height: 30px; background-color: #ff3000; border: 0; border-radius: 15px; color: #fff; } input[type=button].on { background-color: #eee; colo

  • js实现登录注册框手机号和验证码校验(前端部分)

    开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

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

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

  • 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+canvas实现滑动拼图验证码功能

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

  • 使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是: 1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码 结构与样式: <canvas id="mycanvas" width='90' height='40'> 您的浏览器不支持canvas,请换个浏览器试试~ </canvas> <style> #mycanvas{ curso

随机推荐