<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <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 ;
   window.onload = function createCode(){
     code = "";
     var codeLength = 4;
     var checkCode = document.getElementById("code");
     var random = new Array(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');
     for(var i = 0; i < codeLength; i++) {
     var index = Math.floor(Math.random()*36);
     code += random[index];
    }
    checkCode.value = code;
   }
  
   function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase();     
    if(inputCode.length <= 0) {
     alert("请输入验证码！");
    }      
    else if(inputCode != code ) {
     alert("验证码输入错误！@_@");
     createCode();
     document.getElementById("input").value = "";
    }      
    else {
     alert("^-^");
    }          
   }
   </script>

js生成验证码的更多相关文章

  1. node.js生成验证码及图片

    示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...

  2. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  3. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  4. js生成验证码并检验

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  5. js生成验证码并验证

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...

  6. js生成验证码并且判断

       <style type="text/css">        .code        {            font-family: Arial;      ...

  7. js生成验证码并且验证

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  8. js生成验证码并验证的登录页面

    <!Doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  9. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

随机推荐

  1. Intent传递对象——Serializable和Parcelable区别

    为什么要将对象序列化? 1.永久性保存对象,保存对象的字节序列到本地文件中: 2.用过序列化对象在网络中传递对象: 3.通过序列化对象在进程间传递对象. 1.实现Serializable接口 Seri ...

  2. php 修改、增加xml结点属性的实现代码

    php修改xml结点属性,增加xml结点属性的代码,有需要的朋友可以参考下 php 修改 增加xml结点属性的代码,供大家学习参考.php修改xml结点属性,增加xml结点属性的代码,有需要的朋友,参 ...

  3. BZOJ3687：bitset STL

    [bzoj3687][FJ2014集训]简单题 2014年9月14日1,8212 [题目描述]小呆开始研究集合论了,他提出了关于一个数集四个问题:1. 子集的异或和的算术和.2. 子集的异或和的异或和 ...

  4. C#实现ActiveX控件开发与部署

    现在,我们手里已经有了这个控件包:QRCode.cab,下面我们编写一个测试的网页 <html> <head> <title>无标题页</title> ...

  5. SQL调用存储过程

    --1调用存储过程exec 存储过程名 参数--2当表使用select a.*,b.* from tb b inner join (select * from openrowset('sqloledb ...

  6. bzoj 3118: Orz the MST（单纯形）

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3118 题意:给出一个图以及图中指定的n-1条边组成的生成树.每条边权值加1或者减去 ...

  7. cert

  8. [JAVA设计模式]第三部分：结构模式

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. [Effective Java]第五章 泛型

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. hdu 1800 （map）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1800 Flying to the Mars Time Limit: 5000/1000 MS (Java/ ...