实现代码：

<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. hdu3016 线段树+简单DP

    以每个方块左右坐标区间为节点建立字典树,每个节点保存这个区间对应的方块的下标,将方块按照高度排序. 如何得到第i个方块可以移动到的两个方块呢?将所有方块排完序,将前i-1个方块放入字典树,根据第i个方 ...

  2. jmeter压力测试笔记- HTTP协议

    一.目标 使用jmeter进行HTTP接口压力测试: 命令行方式运行,方便在linux环境运行: 二.面临的问题 支持多环境测试(开发.测试.生产环境) 支持用户数据.线程数.循环次数等配置在运行时自 ...

  3. Windows平台监听服务无法启动报报TNS-12560 TNS-00530案例

      在Windows Server 2012平台使用命令启动监听服务时遇到了TNS-12560 & TNS-00530错误. C:\Users>lsnrctl start GEW_LIS ...

  4. java字符流

    网上有很多地方说inputStreamReader和outStreamWriter.BufferedReader和BufferedWriter都是字符流.不过也有地方说inputStreamReade ...

  5. mongodb命令行group分组和java代码中group分组

    group分组统计是数据库比较常用的功能,mongodb也不例外.不过相对于普通的增删改查,group操作就略微麻烦一些, 这里对group在shell中的操作.使用java原生代码操作以及集成spr ...

  6. Android常见Crash类型分析（一）

    问题1.   java.lang.IllegalStateException: The specified child already has a parent. You must call remo ...

  7. R语言︱SNA-社会关系网络—igraph包（社群划分、画图）（三）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 社群划分跟聚类差不多,参照<R语言与网站 ...

  8. Java中list.get(index)报错

    1.list.get(index)中的index为负值异常 严重:Exception occurred during processing request:-1 java.lang.ArrayInde ...

  9. freemarker中的left_pad和right_pad

    freemarker中的left_pad和right_pad 1.简易说明 (1)left_pad 距左边 (2)right_pad 距右边 (3)当仅仅只有一个参数时,插入的是空白:当有两个参数时, ...

  10. Vue2.0结合webuploader实现文件分片上传

    Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...