转自：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. 用systemtap来做系统性能分析和事件分析

    http://zhengheng.me/2015/02/11/systemtap-analy/

  2. ArcCatalog中通过ArcSDE向Oracle数据库中导入数据

    将数据导入到Oracle指定的表空间的具体内容如下: 首先,在ArcCatalog中建立指定表空间的数据库连接(要以指定表空间的用户登录): 然后,在ArcCatlog中定位到数据源,选中并拷贝图层; ...

  3. uicollectionview 使用uibutton或者uiimageview实现旋转出现scale的问题

    uicollectionview下单独使用uibutton然后setimage或者直接使用uiimageview然后一定角度旋转后发现size会变动 解决方案:添加uibutton到uicollect ...

  4. 切换横屏幕 onCreate 多次执行问题

    在AndroidManifest.xml 中activity 中添加 android:configChanges="orientation|screenSize|smallestScreen ...

  5. Android ZXing 二维码、条形码扫描介绍

    本帖最后由 Shims 于 2013-11-9 12:39 编辑 最近公司的Android项目需要用到摄像头做条码或二维码的扫描,Google一下,发现一个开源的 ZXing项目.它提供二维码和条形码 ...

  6. 快速上传到rackspace cdn工具turbolift swift 安装

    快速上传到rackspace cdn 工具安装,2步即可完成: 1.安装git CentOS的yum源中没有git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 确保已安装了依赖的包 y ...

  7. 1054. 求平均值 (20)-PAT乙级真题

    今天刚刚到学校,2017年学习正式开始了,今天看到了浙大的<数据结构>这学期又要开课了,决定一定要跟着学习一遍:在大学生mooc网上学习:http://www.icourse163.org ...

  8. git 更新远程分支

    使用git的时候,有时候会出现远端更新了一个分支,但是从本地想checkout一个远程分支时,会出现如下错误: fatal: git checkout: updating paths is incom ...

  9. git log 查看版本演变历史

    1.查看git操作历史 $ git log  #git 查看git操作历史 $ git log  --oneline #git 简洁的查看git变更记录 $ git log -n4  --onelin ...

  10. Tomcat载入两次问题

    前提介绍: 1.某个应用Dragon放置路径:/opt/apache-tomcat-7.0.47/webapps/Dragon 2.Tomcat的server.xml部分配置信息例如以下:    &l ...