JavaScript实现简单验证码


Posted in Javascript onAugust 24, 2020

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('正确')
      }
}

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

Javascript 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
js实现索引图片切换效果
Nov 21 Javascript
详解Vue方法与事件
Mar 09 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
node后端服务保活的实现
Nov 10 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
JavaScript经典案例之简易计算器
Aug 24 #Javascript
原生js实现拖拽移动与缩放效果
Aug 24 #Javascript
JavaScript实现拖拽和缩放效果
Aug 24 #Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 #Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 #Javascript
JS实现按比例缩小图片宽高
Aug 24 #Javascript
You might like
PHP文件上传实例详解!!!
2007/01/02 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
jQuery实现瀑布流布局
2014/12/12 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
答谢会策划方案
2014/05/12 职场文书
一般党员对照检查材料
2014/09/24 职场文书
微信搭讪开场白
2015/05/28 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Redis实战高并发之扣减库存项目
2022/04/14 Redis