转自：http://www.php.cn/js-tutorial-411734.html

HTML部分：

1

2

3

4

5

6

7

<body onload='createCode()'>

        <div>验证码： 

            <input type = "text" id = "input"/> 

            <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' /></br>

            <input type = "button" value = "验证" onclick = "validate()"/>

        </div> 

</body>

CSS部分：

1

2

3

4

5

6

7

8

9

#code{

            font-family:Arial,宋体;

            font-style:italic;

            color:green;

            border:0;

            padding:5px 10px;

            letter-spacing:3px;

            font-weight:bolder;

        }

JavaScript部分：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

var code ; //在全局定义验证码        

        function createCode(){

             code = "";  

             var codeLength = 4;//验证码的长度 

             var checkCode = document.getElementById("code");  

             var random = 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');//随机数 

             for(var i = 0; i < codeLength; i++) {//循环操作 

                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 

                code += random[index];//根据索引取得随机数加到code上 

            } 

            checkCode.value = code;//把code值赋给验证码 

        }

        //校验验证码 

        function validate(){ 

            var inputCode = document.getElementById("input").value.toUpperCase();

            //取得输入的验证码并转化为大写       

            if(inputCode.length <= 0) { //若输入的验证码长度为0 

                alert("请输入验证码！"); //则弹出请输入验证码 

            }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 

                alert("验证码输入错误!"); //则弹出验证码输入错误 

                createCode();//刷新验证码 

                document.getElementById("input").value = "";//清空文本框 

            }else { //输入正确时 

                alert("验证通过");

            }

        }

如何用JavaScript实现获取验证码的效果的更多相关文章

  1. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  2. js获取验证码 秒表效果（原创）

    <script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...

  3. javascript 倒计时获取验证码

    var wait=60;function reSendCode(id) { var obj = $("#"+id); if (wait == 0) { obj.attr(" ...

  4. [RN] React Native 获取验证码 按钮

    React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...

  5. Angular.js 使用获取验证码按钮实现-倒计时

    获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...

  6. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

  7. 获取验证码效果和后台代码（js+html+cs）

    客户端js+html代码 <script type="text/javascript"> var tcode = 0;//定时器返回代码 //获得验证码 functio ...

  8. 用Javascript做一个“获取验证码”的按钮

    要求:①点击按钮后背景色会发生改变②有倒计时(一般为30秒) <!DOCTYPE HTML> <html> <head> <meta charset=&quo ...

  9. 用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果

    js代码  代码如下 复制代码 <div class="input">    <input type="button" id="bt ...

随机推荐

  1. Oracle 12c agent install for linux

    安装Agent代理 在EM11g时,agent安装是通过在被监制主机端下载agent代理并安装,在EM12c版本号上,能够在EM12c服务端.通过"推送"的方式把agent代理在远 ...

  2. 数据库系统学习（六）-SQL语言基本操作

    第六讲 SQL语言概述 基本命名操作 关系代数是集合的思想 关系演算是逻辑的思想(数学公式) SQL-86,SQL-89,SQL-92,SQL-99,SQL-2003,2008...发展过程标准 SQ ...

  3. Solidworks如何绘制装饰螺纹线

    1 插入-注解,装饰螺纹线   2 绘制装饰螺纹线,选择螺纹的边线,标准选择ISO,下面可以选择的范围就确定了(M6的孔,只能选择M8的螺纹或者M10的螺纹),画好之后在3D图中并没有明确的螺纹样式 ...

  4. linux的主分区与逻辑分区的关系

     主分区和扩展分区的差别在于主分区位于硬盘的最開始.MBR 扇区的位置.这个位置的数据在计算机启动时.会自己主动被 BIOS 读取而且运行,也就是说这个位置的分区表会自己主动被 BIOS 读取到内 ...

  5. VC中常见API函数使用方法（经验版）

    ***********************************************声明*************************************************** ...

  6. 怎样使用ListView？

    怎样使用ListView? watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFC ...

  7. Intel HEX文件解析

    近期有一个需求就是为Arduino开发板做一个基于蓝牙的无线烧录程序.眼下的Arduino程序都是通过USB线连接到电脑的主机上,实际的传输过程是基于USB协议的,这个过程还是比較麻烦的.由于每次的编 ...

  8. iOS开发核心语言Objective C —— 全部知识点总结

    本分享是面向有意向从事iOS开发的伙伴及苹果产品的发烧友,亦或是已经从事了iOS的开发人员,想进一步提升者.假设您对iOS开发有极高的兴趣,能够与我一起探讨iOS开发.一起学习,共同进步.假设您是零基 ...

  9. 项目Beta冲刺（团队1/7）

    项目Beta冲刺(团队1/7) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标: 完成项目Beta版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 陈宇 ...

  10. Unity3D游戏开发之粒子系统实现具体解释

     今天为大家分享的是Unity3D中的粒子系统.粒子系统通经常使用来表现烟雾.云等高级效果.是一个十分注重制作技巧的部分.今天我们将以一个气泡的演示实例来一起学习怎样在Unity3D中使用粒子系统 ...