脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生js实现数字字母混合验证码

原生js实现数字字母混合验证码的简单实例

 更新时间：2015年12月10日 08:58:49   作者：乐观地摸摸头  
这篇文章主要介绍了原生js实现数字字母混合验证码的简单实例，注释很详细，感兴趣的小伙伴们可以参考一下

本文实例讲述了原生js实现数字字母混合验证码的全部代码，重点是注释很详细，便于大家理解，特分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title></title>
  <style type="text/css">
    body, div {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-family: "微软雅黑";
      -webkit-user-selelct: none;
    }

    #code {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -50px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #ff0000;
      cursor: pointer;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
<div id="code">
  xdF2
</div>
<script type="text/javascript">
  //当前验证码获取的随即范围
  var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  //思想：0-61索引 只需要随机生成4个索引，然后charAt可以获取随机4个索引。
  var oDiv = document.getElementById("code");

  function getRandom(n, m) {
    n = Number(n);       //转换n,m，结果不是数字就是NaN
    m = Number(m);
    if (isNaN(n) || isNaN(m)) {     //判断n,m,是不是有效数字，如果n或m其中一个传入的不是数字
      return Math.random();      //返回 【0-1）之间的随机小数
    }
    if (n > m) {             //如果n大于m，则交换位置
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.round(Math.random() * (m - n) + n);          //返回，取m,n之间的随机整数。
  }


  function getCode() {       
    var str = "";　　　　　　　　//定义一个空字符串备用
    for (var i = 0; i < 4; i++) {    //遍历4个索引
      var ran = getRandom(0, 61);      //调用getRandom方法，随机获取一个索引0-61里的随机索引
      str += codeStr.charAt(ran);      //把codeStr字符串里，我们指定获取ran（这个4个索引）；
    }
    oDiv.innerHTML = str;       //呈现在页面上
  }

  getCode();              //调用方法
          
  oDiv.onclick = function () {
    getCode();
  }
</script>
</body>
</html>

您可能感兴趣的文章:

相关文章

  • JS分割字符串并放入数组的函数

    JS分割字符串并放入数组的函数

    JS分割字符串并放入数组的函数，需要的朋友可以参考下。
    2011-07-07
  • 浅谈JavaScript的计时器对象

    浅谈JavaScript的计时器对象

    下面小编就为大家带来一篇浅谈JavaScript的计时器对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-12-12
  • JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】

    JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】

    这篇文章主要介绍了JS实现求数组起始项到终止项之和的方法,基于数组扩展函数实现该功能,涉及javascript针对数组的简单判断、遍历等相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • 微信小程序接入vant Weapp组件的详细步骤

    微信小程序接入vant Weapp组件的详细步骤

    这篇文章主要介绍了微信小程序接入vant Weapp组件的详细步骤,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • JavaScript多功能甘特图组件jsGantt详解

    JavaScript多功能甘特图组件jsGantt详解

    jsGantt是一个可定制的、灵活的、多语言的甘特图组件，由原生 JavaScript构建，它使用客户端渲染以获得快速的性能和动态的交互性，非常适用于任何需要交互式时间线或时间表显示的项目，本文就给大家介绍一下JavaScript多功能甘特图组件jsGantt
    2023-07-07
  • 微信小程序如何获知用户运行小程序的场景教程

    微信小程序如何获知用户运行小程序的场景教程

    这篇文章主要给大家介绍了在微信小程序中如何获知用户运行小程序场景的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来看看吧。
    2017-05-05
  • 浅谈JavaScript中等号、双等号、 三等号的区别

    浅谈JavaScript中等号、双等号、 三等号的区别

    这篇文章主要介绍了浅谈JavaScript中等号、双等号、 三等号的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JavaScript算法面试题

    JavaScript算法面试题

    这篇文章主要给大家分享的是JavaScript算法面试题汇总，文章举例清晰内容详细，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-04-04
  • javascript IFrame 强制刷新代码

    javascript IFrame 强制刷新代码

    经常会使用多个iframe来展示领域模型主子关系(主/子单)，测试发现iframe是有cache功能的
    2009-07-07
  • JavaScript正则表达式exec/g实现多次循环用法示例

    JavaScript正则表达式exec/g实现多次循环用法示例

    这篇文章主要介绍了JavaScript正则表达式exec/g实现多次循环用法,结合实例形式分析了javascript正则表达式g修饰符相关使用技巧,需要的朋友可以参考下
    2017-01-01

最新评论