脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js验证码

JavaScript实现简单验证码

 更新时间：2020年08月24日 12:52:21   作者：@随你所喜Z  
这篇文章主要为大家详细介绍了JavaScript实现简单验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript实现简单验证码，供大家参考，具体内容如下

验证流程图

HTML部分

```javascript
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .code {
    font-family: Arial;
    font-style: italic;
    color: blue;
    font-size: 26px;
    border: 0;
    padding: 0.2px 1.2px;
    letter-spacing: 4px;
    font-weight: bolder;
    float: left;
    cursor: pointer;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    background-color: #d8b7e3;
  }

  span {
    text-decoration: none;
    font-size: 12px;
    color: #288bc4;
    padding-left: 10px;
    /* color: #4c9b7675; */
  }

  span:hover {
    text-decoration: underline;
    cursor: pointer;
    /* color: rgb(rgb(221, 84, 84), green, blue); */
    /* color: rgb(rgb(160, 207, 209), green, blue); */
  }
</style>

<body>
  <div>
    <table border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td>
          <div id="checkCode" class="code" onclick="createCode(4)">543</div>
        </td>
        <td> <span onclick="createCode(4)">看不清换一张</span></td>
      </tr>
      <tr>
        <td>验证码：</td>
        <td><input type="text" id="inputCode" style="float:left;" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" onclick="validateCode()" value="确定" /></td>
      </tr>
    </table>
</div>

JavaScript部分

window.onload = function () {
      createCode(4);
    }


    // 创建验证码
    function createCode(len) {
      // 
      var code = '';
      var codeLength = parseInt(len); //验证码的长度
      var checkCode = document.getElementById('checkCode'); //获取画布
      // 设置验证码
      var codeArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'l', 'k', 'j', 'h', 'g', 'f', 'd', 's', 'a', 'p', 'o', 'i', 'u', 'y', 't', 'r', 'r', 'e', 'w', 'q', "Z", 'X', 'C', "V", "B", "N", "M", "A", "S", "D", "F", "G", "H", "J", "L", "K", "P", "O", "I", "U", "Y", "T", "R", "E", "W", "Q")

      //设置验证码颜色
      // var num= Math.floor(Math.random() * 8)
      var color = '#';
      var bgcolor = '#';
      var fontcolor = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f');

      // 循环数组，随机获取
      for (var i = 0; i < codeLength; i++) {
        //获取数组下标
        var charNum = Math.floor(Math.random() * 62);
        // 存储数组
        code = code + codeArray[charNum];
      }
      if (checkCode && code.length == codeLength) {
        checkCode.innerHTML = code;
      }

      // 设置验证码颜色
      for (var i = 0; i < 6; i++) {
        var colorNum = Math.floor(Math.random() * 15);
        color += fontcolor[colorNum];
      }
      console.log(color)
      checkCode.style.color = color;
      
      // 设置画布背景颜色
      for (var i = 0; i < 6; i++) {
        var colorNum = Math.floor(Math.random() * 15);
        bgcolor += fontcolor[colorNum];
      }
      checkCode.style.backgroundColor = bgcolor;

    }

    // 检验验证码是否正确
    function validateCode() {
      // 获取画布的验证码
      var checkCode = document.getElementById("checkCode").innerHTML;
      // 获取用户输入的验证码，并且去掉空格
      var inputCode = document.getElementById('inputCode').value.trim();

      console.log(checkCode)
      console.log(inputCode)

      // 判断是否相等
      if (inputCode.length < 4) {
        alert('验证码长度为四位');
        createCode(4);
      } else if (checkCode.toLocaleLowerCase() != inputCode.toLocaleLowerCase()) {
        alert('输入验证码不正确！');
        createCode(4);
      } else {
        alert('正确')
      }
}

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

您可能感兴趣的文章:

相关文章

  • 浅谈Webpack核心模块tapable解析

    浅谈Webpack核心模块tapable解析

    这篇文章主要介绍了浅谈Webpack核心模块tapable解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript错误处理和调试方法详解

    JavaScript错误处理和调试方法详解

    代码审查是调试JavaScript的重要方法,因为它允许多个开发人员一起处理代码库并在开发过程的早期发现错误,这篇文章主要给大家介绍了关于JavaScript错误处理和调试方法的相关资料,需要的朋友可以参考下
    2023-11-11
  • javascript forEach通用循环遍历方法

    javascript forEach通用循环遍历方法

    循环遍历一个元素是开发中最常见的需求之一，那么让我们来看一个由框架BASE2和Jquery的结合版本吧.
    2010-10-10
  • 一文带你掌握JavaScript中的执行上下文和作用域

    一文带你掌握JavaScript中的执行上下文和作用域

    作为一名前端工作人员，我们必须知道JavaScript内部是如何执行的。那对于执行上下文和作用域的理解至关重要，无论是工作还是面试都是无法跳跃的一步，本文就来带大家深入了解一下
    2023-02-02
  • ionic实现底部分享功能

    ionic实现底部分享功能

    这篇文章主要为大家详细介绍了ionic实现底部分享功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript检测浏览器cookie是否已经启动的方法

    JavaScript检测浏览器cookie是否已经启动的方法

    这篇文章主要介绍了JavaScript检测浏览器cookie是否已经启动的方法,实例分析了javascript操作cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Javascript 继承实现例子

    Javascript 继承实现例子

    在真正的Web站点和应用程序中，几乎不可能创建名为ClassA和ClassB的类，更可能的是创建表示特定事物（如形状）的类。考虑本章开头所述的形状的例子，Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。
    2009-08-08
  • ES5 ES6中Array对象去除重复项的方法总结

    ES5 ES6中Array对象去除重复项的方法总结

    这篇文章主要给大家介绍了Array对象去除重复项的相关资料，文中通过示例代码详细介绍了在ES5和ES6中Array对象去除重复项的方法，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-04-04
  • 如何使用ImageDecoder API让GIF图片暂停播放

    如何使用ImageDecoder API让GIF图片暂停播放

    在本文中，我们介绍了如何使用ImageDecoder API来暂停GIF图像的播放，虽然这需要一些JavaScript编程知识，但它是一个非常强大的技术，可以让您对GIF图像进行各种高级操作，感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • JS实现图片居中悬浮效果

    JS实现图片居中悬浮效果

    这篇文章给大家分享的是通过JS实现图片垂直居中悬浮，不跟随滚动条飘动的效果，有兴趣的朋友跟着学习下吧。
    2017-12-12

最新评论