实现代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <head>

		<meta charset="UTF-8">

		<title></title>

	</head>

    <style type="text/css">

    .code

    {

            background-image:url(1.gif);

            font-family:Arial;

            font-style:italic;

             color:blue;

             font-size:30px;

             border:0;

             padding:2px 3px;

             letter-spacing:3px;

             font-weight:bolder;

             float:left;

             cursor:pointer;

             width:150px;

             height:60px;

             line-height:60px;

             text-align:center;

             vertical-align:middle;

    }

    a

    {

        text-decoration:none;

        font-size:12px;

        color:#288bc4;

        }

    a:hover

    {

       text-decoration:underline;

        }

    </style>

    <script language="javascript" type="text/javascript">

        var code;

        //生成验证码

        function createCode() {

            code = "";

            var codeLength = 6; //验证码的长度

            var checkCode = document.getElementById("checkCode");

            var codeChars = 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',

            '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 charNum = Math.floor(Math.random() * 52);

                code += codeChars[charNum];

            }

            if (checkCode)

            {

                checkCode.className = "code";

                checkCode.innerHTML = code;

            }

        }

        //验证输入的验证码是否正确

        function validateCode()

        {

            var inputCode = document.getElementById("inputCode").value;

            if (inputCode.length <= 0)

            {

                alert("请输入验证码！");

                createCode();  //刷新验证码

            }

            else if (inputCode.toUpperCase() != code.toUpperCase())

            {

                alert("验证码输入有误！");

                createCode();   //刷新验证码

            }

            else

            {

                alert("验证码正确！");

                createCode();   //刷新验证码，输入正确后也可不刷新验证码

            }

        }

     </script>

</head>

<!--onload实现刷新页面时刷新验证码-->

<body onload="createCode()">

    <!--<form id="form1" runat="server" onsubmit="validateCode()">-->

    <div>

    <table border="0" cellspacing="5" cellpadding="5" >

        <tr>

            <td></td><td> <div class="code" id="checkCode" onclick="createCode()" ></div></td>

            <td><a  href="#" onclick="createCode()">看不清换一张</a></td>

        </tr>

        <tr>

            <td>验证码：</td><td><input  style="float:left;" type="text"   id="inputCode" /></td><td>请输入验证码</td>

        </tr>

        <tr><td></td><td><input id="Button1"  onclick="validateCode();" type="button" value="确定" /></td><td></td>

        </tr>

    </table>

    </div>

    <!--</form>-->

</body>

</html>

　　实现效果：

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

  1. H5+JS生成验证码

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

  2. 纯js生成QRCode

    纯js,不依赖jquery,非常好用,废话不多说,直接上代码! <!DOCTYPE html> <html> <head> <meta charset=&qu ...

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

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

  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写验证码

    <html> <head> <meta name="viewport" content="width=device-width" ...

随机推荐

  1. CentOS命令修改系统时间同步

    使用Centos,遇到本地时间对不上,直接敲命令:date -s "2016-01-08  15:15:15"是立即生效了,但是重启后,系统时间还是原来的. 修改了其一是没有办法奏 ...

  2. 3.1 if 条件分支语句

    Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 获取条件语句的执行结果的过程就是真假值判断 #首先需要说明在Python中 #假值(False):0. ...

  3. service不死之身

    为了应用常驻后台,避免被第三方杀掉的方法 1)Service设置成START-STICKY kill 后会被重启(等待5秒左右),重传Intent,保持与重启前一样 2)通过startForegrou ...

  4. java网络编程（1）

    太久没有用java做一些东西了,搞太多的协议框架,基本的东西好像快忘记了~每天抽出一点时间出来,来好好温习下基础,顺便记录下来,以后还忘记可以回来看看==.首先从网络编程开始吧==.这玩意太久没有用了 ...

  5. H3C交换机802.1&dot1x认证

    1.全局激活Dot1x认证功能 [H3C]dot1x 2.进入接口激活dot1x [H3C]interface GigabitEthernet 1/0/1 [H3C-GigabitEthernet1/ ...

  6. java Socket实现简单在线聊天（一）

    最近的项目有一个在线网页交流的需求,由于很久以前做过的demo已经忘记的差不多了,因此便重新学习一下. 我计划的大致实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持 ...

  7. String getProperty(String key, String def)

    String getProperty(String key, String def) 获取用指定键描述的系统属性. * 若key 系统环境或properties等配置文件的键,如os.name等,返回 ...

  8. Tomcat中的Context.xml的<Loader delegate="true"/>

    Tomcat中的Context.xml的<Loader delegate="true"/> 1.<Loader delegate="true" ...

  9. web开发中对缓存的使用

    很久没有发表随笔了,最近工作不是太忙,抽点时间 给大家谈谈缓存吧 ; 在我从事web开发的几年实践中  接触了缓存技术 也是比较多的,在最初的 项目当中 我们用到 hibernate 的 一二级缓存, ...

  10. LAMP应用部署

    LAMP+wordpress 部署博客 软件安装 yum -y install httpd yum -y install php yum -y install php-mysql yum -y ins ...