JavaScript使用Math.random()生成简单的验证码

第一种：单纯的纯数字验证码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js验证码</title>
</head>
<body>
<div class="yzm" style="width: 20%;height: 300px;text-align: center;background-color: pink;line-height: 200px;"></div>
</body>
</html>
<script>
  window.onload = function () {
    var yzm=document.querySelector(".yzm");
    //页面一加载完成就生成随机数调用rand()
    yzm.innerHTML=rand(5);
    //点击切换随机码
    yzm.onclick=function() {
      var num = rand(5);
      this.innerHTML = num;
    };
    //生成随机码
    function rand(number){
   //用来存储产生的随机数
    var num="";
      for(var i=0;i<number;i++){
        num+=Math.floor(Math.random()*10)
      }
      return num;
    }
  }
</script>

第二种：输入的验证码与生成的验证码进行校验(数字与字母相结合)

<html>
<head>
  <meta charset="UTF-8">
  <title>验证码</title>
  <style type="text/css">
    #code
    {
      font-family:Arial;
      font-style:italic;
      font-weight:bold;
      border:0;
      letter-spacing:2px;
      color:blue;
    }
  </style>
</head>
<body>
<div>
  <input type = "text" id = "input"/>
  <input type = "button" id="code" onclick="createCode()"/>
  <input type = "button" value = "验证" onclick = "validate()"/>
</div>
</body>
</html>
<script>
  var code ; //在全局定义验证码
  var number = 5;//验证码生成的个数
  var checkCode = document.getElementById("code");
  //产生验证码(页面一加载就生成)
  window.onload = function (){
    createCode();
  };
  //产生验证码(输入错误的时候刷新验证码，函数调用)
  function createCode(){
    code = "";
    var codeLength = number;//验证码的长度
//    var checkCode = document.getElementById("code");
    var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
      'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',
      's','t','u','v','w','x','y','z'];//随机数
    for(var i = 0; i < codeLength; i++) {//循环操作
      var index = Math.floor(Math.random()*random.length);//取得随机数的索引(random.length)
      code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.value = code;//把code值赋给验证码
  }
  //校验验证码
  function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
    if(inputCode.length <= 0) { //若输入的验证码长度为0
      alert("请输入验证码！"); //则弹出请输入验证码
    } else if(inputCode != code.toUpperCase() ) { //将随机产生的验证码转化为大写，若输入的验证码与产生的验证码不一致时
      alert("验证码输入错误！@_@"); //则弹出验证码输入错误
      createCode();//刷新验证码
      document.getElementById("input").value = "";//清空文本框
    }
    else { //输入正确时
      alert("正确^-^"); //弹出^-^
    }
  }
</script>

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例

    概要 应同学邀请,演示如何使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript 脚本实现自动化操作. 下面测试的是一个廉价机票预订网站(http://www.flyscoot.com/),关键点如下 使用 QWebEngineView 加载网页,并显示进度. 在默认配置(QWebEngineProfile)中植入 Javascript 内容,这样脚本会在所有打开的网页中执行,不论跳转到哪个网址. Javascript 脚本使用网址中的路径名,判断当前网页位置,从而决定执行哪种操作.

  • JavaScript"模拟事件"的注意要点详解

    DOM中的事件模拟 三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串: UIEvents(DOM3中的UIEvent)鼠标和键盘事件: MouseEvents(DOM3中的MouseEvent)鼠标事件: MutationEvents(DOM3中的MutationEvent)变动事件: HTMLEvents(没有DOM3中对应的事件)HTML事件: 其次在创建了event对象之后,还需要使用与事件有关的信息对其进

  • 深入探讨JavaScript的最基本部分之执行上下文

    深入探讨JavaScript的最基本部分之执行上下文

    在这篇文章中,我将深入探讨JavaScript的最基本部分之一,即Execution Context(执行上下文). 在本文结束时,你应该对解释器了解得更清楚:为什么在声明它们之前可以使用某些函数或变量?以及它们的值是如何确定的? 什么是执行上下文? JavaScript的执行环境非常重要,当JavaScript代码在行时,会被预处理为以下情况之一: Global code - 首次执行代码的默认环境. Function code - 每当执行流程进入函数体时. Eval code - 要在ev

  • 推荐15个最好用的JavaScript代码压缩工具

    推荐15个最好用的JavaScript代码压缩工具

    JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇文章中,我们选择了15个最好用的 JavaScript 压缩工具,有简单的在线转换器,GUI工具和命令行界面等. 1. JavaScript Minifier It is a nice looking tool with an API to minify your js code. 2. JSMIn

  • 谈谈JavaScript中super(props)的重要性

    我听说 Hooks 最近很火.讽刺的是,我想用一些关于 class 组件的有趣故事来开始这篇文章.你觉得如何? 本文中这些坑对于你正常使用 React 并不是很重要. 但是假如你想更深入的了解它的运作方式,就会发现实际上它们很有趣. 开始第一个. 首先在我的职业生涯中写过的super(props) 自己都记不清: class Checkbox extends React.Component { constructor(props) { super(props); this.state = { i

  • Python常用的json标准库

    当请求 headers 中,添加一个name为 Accept,值为 application/json 的 header(也即"我"(浏览器)接收的是 json 格式的数据),这样,向服务器请求返回的未必一定是 HTML 页面,也可能是 JSON 文档. 1. 数据交换格式 -- JSON(JavaScript Object Notation) http 1.1 规范 请求一个特殊编码的过程在 http1.1 规范中称为内容协商(content negotiation) JSON 特点

  • JavaScript两种计时器的实例讲解

    通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件.提供了两种计时器的方法如下: window.setInterval(): 这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval() window.setTimeout(); 延迟执行内容 setInterval()的使用方法: setInterval(code,millisec); code:可以是方法名,如果是方法不要加小括号.同时也可以

  • js获取form表单中name属性的值

    在项目中因为动态表单无法确定标签name属性的值,因此需要即时获取以便进行存储.前端代码如下: <div class="control-group"> <label class="control-label">土拨鼠常挖坑</label> <form:input path="formAttribute1" class="input-xlarge" value=""

  • JavaScript中.min.js和.js文件的区别讲解

    Q&A Q: .js和.min.js文件分别是什么? A: .js是JavaScript 源码文件, .min.js是压缩版的js文件. Q:为什么要压缩为.min.js文件? 减小体积  .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快. 防止窥视和窃取源代码  经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 js 源代码 Q:.js 和.min.js文件的优缺点? .js文件:   优点: 可读性较好,易于debug和更改.   缺点:体积较大,传输时

  • JavaScript常用工具方法封装

    因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { //是否数字 return Object.prototype.toString.call(o).slice(8, -1) === 'Number' } isBoolean (o)

随机推荐