实现代码：

<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. 使用Socket对序列化数据进行传输(基于C#)

    客户端代码 [Serializable] // 表示该类可以被序列化 class Person{ public string name; public void HI() { Debug.Log(na ...

  2. spring 配置文件无法加载，junit找不到xml配置文件java.lang.IllegalStateException: Failed to load ApplicationContext

    最近遇到一个奇怪的问题.maven项目再进行junit单元测试的时候发现无法加载配置文件.一会能加载一会又不能加载.然后试了在src/main/resource下面的配置文件放到src/test/re ...

  3. QT creator 其他资源（image）的添加以及简单利用

    QT creator 添加一些资源文件  :https://www.cnblogs.com/cszlg/p/3234786.html(转自园子) 补充: 补充:如果要给生成的exe可执行文件更换一个自 ...

  4. app后端session共享问题

    在分布式中,session如何共享,用户登陆要解决的问题如下图所示,通过nignx请求转发,到不同的应用模块中,需要判断用户有没有登陆验证通过,问题又来了,app的移动端不像浏览器,没有cookie, ...

  5. 最简化搭建yum仓库

    在使用rpm安装软件包时,时常会遇到一些软件依赖性问题,如果是简单的一两个依赖性还是可以手动解决.要是出现大量的依赖性问题的话会让增大工作量.yum是一个很好的前端程序,可解决软件包相关依赖性,可在多 ...

  6. Vmware下centos与windows能ping通并能上网

    1.桥接模式 2.NAT模式 3.Host-Only模式 1.桥接模式 vim /etc/udev/rules.d/70-persistent-net.rules 与/etc/sysconfig/ne ...

  7. DNS 访问 Service - 每天5分钟玩转 Docker 容器技术（138）

    在 Cluster 中,除了可以通过 Cluster IP 访问 Service,Kubernetes 还提供了更为方便的 DNS 访问. kubeadm 部署时会默认安装 kube-dns 组件. ...

  8. （转）Hanoi塔问题分析

    转自:http://shmilyaw-hotmail-com.iteye.com/blog/2077098 简介 关于Hanoi塔问题的分析,在网上的文章都写烂了.之所以打算写这篇文章,更多的是针对这 ...

  9. 【前端】Vue和Vux开发WebApp日志二、优化gulp任务

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_2.html 项目github地址:https://github.com/shamoyuu/vue- ...

  10. Linux下搭建SVN服务器遇到的问题及解决方法，

    1.checkout时,提示:URL svn://192.168.1.99/svntest doesn't exist... 奇怪,怎么会提示库不存在呢?肯定是哪里配置问题.后来尝试了半天,也在网上搜 ...