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


Posted in Javascript onDecember 10, 2015

本文实例讲述了原生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>
Javascript 相关文章推荐
instanceof和typeof运算符的区别详解
Jan 06 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
JS清除选择内容的方法
Jan 29 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
javascript动画算法实例分析
Jul 31 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
安装vue-cli的简易过程
May 22 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
js实现新年倒计时效果
Dec 10 #Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
You might like
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php读取csc文件并输出
2015/05/21 PHP
linux下php上传文件注意事项
2016/06/11 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python pandas时序处理相关功能详解
2019/07/03 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
车贷收入证明范本
2014/01/09 职场文书
文明好少年事迹材料
2014/08/19 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
党员承诺书格式范文
2015/04/28 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js