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中的双感叹号判断
Nov 11 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
React-Native之定时器Timer的实现代码
Oct 04 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php生成zip文件类实例
2015/04/07 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
jQuery为某个div加入行样式
2017/06/09 jQuery
javascript计算渐变颜色的实例
2017/09/22 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
Python中os.path用法分析
2015/01/15 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
某某同志考察材料
2014/05/28 职场文书
大学生心理活动总结
2014/07/04 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
十岁生日答谢词
2015/01/05 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
初中语文教学反思范文
2016/03/03 职场文书