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 相关文章推荐
学习jquery之一
Apr 27 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
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面向对象全攻略 (七) 继承性
2009/09/30 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
django 模型中的计算字段实例
2020/05/19 Python
python -v 报错问题的解决方法
2020/09/15 Python
python 代码运行时间获取方式详解
2020/09/18 Python
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
初中生自我鉴定
2014/02/04 职场文书
学校师德师风整改措施
2014/10/27 职场文书
新郎结婚保证书
2015/02/26 职场文书
中秋节主题班会
2015/08/14 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
如何拟写通知正文?
2019/04/02 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery