实现代码：

<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. Asp.Net Core 2.1+的视图缓存(响应缓存)

    响应缓存Razor 页与 ASP.NET 核心 2.0 中不支持. 此功能将支持ASP.NET 核心 2.1 版本. 在老的版本的MVC里面,有一种可以缓存视图的特性(OutputCache),可以保 ...

  2. 吾八哥学Selenium(三)：操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  3. LVS-DR之VIP、DIP跨网段实例

    在日常应用环境中,我们会遇到这样一种lvs部署环境,所有的dr以及的rs server都在一个局域网环境中,但只有一个公网ip,而又需要将应用发布到internet上,都知道lvs的最好的模式就是所有 ...

  4. PHP开发丨3个简单的方法处理emoji表情

    一般Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面insert一下就没了,整个字段变成了空字符串.这是怎么回事呢?原来是因为Mysql的utf8字符集是3字节的,而emo ...

  5. Linux查看非root运行的进程

    Linux查看非root运行的进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps -U root -u root -N PID TTY TIME CMD ...

  6. TypeError: Error #1009: 无法访问空对象引用的属性或方法

    1.错误描述 TypeError: Error #1009: 无法访问空对象引用的属性或方法. at FirstMap/search_clickHandler()[E:\Flash Builder\M ...

  7. Struts+Spring+Hibernate、MVC、HTML、JSP

    javaWeb应用 JavaWeb使用的技术,比如SSH(Struts.Spring.Hibernate).MVC.HTML.JSP等等技术,利用这些技术开发的Web应用在政府项目中非常受欢迎. 先说 ...

  8. 异常-----Java compiler level does not match解决方法

    1, 先设置好jdk,需要确定 项目,eclipse/myeclipse,系统 用的是同一个版本的JDK,我系统中安装的JDK是1.7,所以我把eclipse的jdk成1.7 2, 进入 window ...

  9. 从零一起学Spring Boot之LayIM项目长成记（六）单聊群聊的实现

    文章传送门: https://my.oschina.net/panzi1/blog/1577007 并没有放弃博客园,只是 t-io 在 oschina发展.用了人家的框架,也得帮人家做做宣传是吧~~

  10. SQLiteOpenHelper与SQLiteDatabase的使用

    1. 数据类型 与其它数据库不同,SQLite的数据类型很简单,只有NULL(空类型).INTEGER(整型).REAL(浮点型).TEXT(字符串型).BLOB(二进制型). SQLite为动态数据 ...