实现代码：

<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. python数据可视化学习1

    import matplotlib.pyplot as plt input_values = [1,2,3,4,5] #输入值 squares = [1,4,9,16,25] #输出值 plt.plo ...

  2. day2（字符串、格式化输出、运算符、流程控制）

    一.字符串 在Python中,加了引号的字符都被认为是字符串! 单引号.双引号.多引号的区别? 单引号和 双引号没有任何区别,但是某种情况下需要单双配合 如 msg = " My name ...

  3. CDN中前端层的复制

    前端层的复制是为了提高静态内容分发的性能和可扩展性.将静态内容的分发转由边缘服务器来完成是为了解决可扩展性的问题,因为这样做可以避免出现在对等点和广域网链路处的网络拥堵风险,而这两个地方的拥堵是网络延 ...

  4. python介绍篇

    二进制编码ASSIC 每一个字符统一都需要8个bit来存储 计算机容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1kbytes =1KB 1024个字符,小文 ...

  5. dm642的视频口输出

    void VP1_EDMA(int displayMode,unsigned int w,unsigned int h) {      unsigned int i=0,k=0;  EDMA_Hand ...

  6. Android WebView编程的那些坑（一）

    最大的坑是ROM不同,webkit不同,差异性很大.再加上google的坑,真是坑上加坑.比如js注入问题,比如client回调接口时序问题, 比如内存回收问题,etc 1.内存泄漏问题,尤其注意An ...

  7. PHP学习笔记-POST

    $_POST 描述通过http POST方式提交的数据都会封装到$_POST数组中 有些数据的提交必须使用post 比如上传文件 Post get提交 的区别 安全性 数据传输大小 浏览器限制文本大小 ...

  8. mysql字符串连接

    用SQL Server 连接字符串是用“+” 现在数据库用mysql, 写个累加两个字段值SQL语句居然不支持"+",郁闷了半天在网上查下,才知道mysql里的+是数字相加的操作, ...

  9. java.text.ParseException: Unparseable date: "2015-06-09 hh:56:19"

    1.错误描述 [DEBUG:]2015-06-09 16:56:19,520 [-------------------transcation start!--------------] java.te ...

  10. ajax面试题

    1.ajax是什么?如何创建一个ajax? ajax并不算是一种新的技术,全称是asynchronous javasript and xml,可以说是已有技术的组合,主要用来实现客户端服务器的异步通信 ...