原生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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
jQuery插件之validation插件
Mar 29 jQuery
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
潜说js对象和数组
2011/05/25 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js中日期的加减法
2015/05/06 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python 装饰器重要在哪
2021/02/14 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
优秀民警事迹材料
2014/01/29 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
售房协议书
2014/08/19 职场文书
公务员政审材料
2014/12/23 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
消费者理赔投诉书
2015/07/02 职场文书