javascript实现数字验证码的简单实例


Posted in Javascript onFebruary 10, 2014

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS验证码</title>  
    <style type="text/css">  
        .code   
        {   
            background-image:url(code.jpg);   
            font-family:Arial;   
            font-style:italic;   
            color:Red;   
            border:0;   
            padding:2px 3px;   
            letter-spacing:3px;   
            font-weight:bolder;   
        }   
        .unchanged   
        {   
            border:0;   
        }   
    </style>  
    <script language="javascript" type="text/javascript">       var code ; //在全局 定义验证码   
     function createCode()   
     {    
       code = "";   
       var codeLength = 4;//验证码的长度   
       var checkCode = document.getElementById("checkCode");   
       var selectChar = new Array(0,1,2,3,4,5,6,7,8,9);//所有候选组成验证码的字符,当然也可以用中文的   
       for(var i=0;i<codeLength;i++)   
       {   
           
       var charIndex = Math.floor(Math.random()*10);   
       code +=selectChar[charIndex];   
          
       }   
//       alert(code);   
       if(checkCode)   
       {   
         checkCode.className="code";   
         checkCode.value = code;   
       }   
     }   
      function validate ()   
     {   
       var inputCode = document.getElementById("input1").value;   
       if(inputCode.length <=0)   
       {   
           alert("请输入验证码!");   
       }   
       else if(inputCode != code )   
       {   
          alert("验证码输入错误!");   
          createCode();//刷新验证码   
       }   
       else   
       {   
         alert("OK");   
       }   
       }   
    </script>  
</head>  
<body onload="createCode()">  
<form  action="#">  
     <input  type="text"   id="input1" />  
    <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />  
    <input id="Button1"  onclick="validate();" type="button" value="确定" />    
</form>  
</body>  
</html> 
Javascript 相关文章推荐
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
javascript实现数字+字母验证码的简单实例
Feb 10 #Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 #Javascript
javascript类型转换使用方法
Feb 08 #Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 #Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 #Javascript
JS的参数传递示例介绍
Feb 08 #Javascript
js控制分页打印、打印分页示例
Feb 08 #Javascript
You might like
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP中header用法小结
2016/05/23 PHP
php四种定界符详解
2017/02/16 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python简单区块链模拟详解
2019/07/03 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python实现超级玛丽游戏
2020/03/18 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python识别验证码的思路及解决方案
2020/09/13 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python中二分查找法的实现方法
2020/12/06 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
运动会开幕式致辞
2015/07/29 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
vue使用echarts实现折线图
2022/03/21 Vue.js