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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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
php页面防重复提交方法总结
2013/11/25 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
动态加载js的几种方法
2006/10/23 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
JS实现拼图游戏
2021/01/29 Javascript
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python3中确保枚举值代码分析
2020/12/02 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
面向对象编程的优势是什么
2015/12/17 面试题
构造方法和其他方法的区别
2016/04/26 面试题
积极向上的团队口号
2014/06/06 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Python+pyaudio实现音频控制示例详解
2022/07/23 Python