转自：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. android 圆形按钮

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  2. 一个炫酷的Actionbar效果

    今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...

  3. iOS10你掉坑了吗？

    坑1: 系统导航栏上按键消失问题 坑2: canOpenURL 调用返回NO问题 坑3: iOS10 权限崩溃问题 坑4: xib不好用了?别怕看这里! 坑5: command +/注释失效 坑6: ...

  4. 赵雅智_Swift（2）_swift常量和变量

    分号 Swift 并不强制要求你在每条语句的结尾处使用分号(;) 你打算在同一行内写多条独立的语句必需要用分号 let cat = "? ?? ? "; println(cat) ...

  5. iPhone 适配之路

    (1)1x时代 2007年,初代iPhone公布,屏幕的宽高是320*480像素.这个分辨率一直到iPhone3GS也保持不变. 那时编写iOS的App应用程序.仅仅支持绝对定位. 比方一个butto ...

  6. 【软件project】菜鸟俯瞰软件project

    [背景]初次接触软件project,对软件project不是彻底的了解.但学完一遍软件project,我还是有些感触的. 以下我就对我这阶段的软工学习和理解做一下小小的总结,如有不妥之处.欢迎指正. ...

  7. 【算法编程】找出仅仅出现一次的数-singleNumber

    题目意思: 一个数值数组中,大部分的数值出现两次,仅仅有一个数值仅仅出现过一次,求编程求出该数字. 要求,时间复杂度为线性,空间复杂度为O(1). 解题思路: 1.先排序.后查找. 因为排序的最快时间 ...

  8. Development of Intel chipsets interconnection

    http://en.wikipedia.org/wiki/Chipset Chipset From Wikipedia, the free encyclopedia     A chipset is ...

  9. addEventListener event

    addEventListener   先看个例子: document.getElementById("myBtn").addEventListener("click&qu ...

  10. AML LCD debuged

    root@k101:/ # cat /sys/class/lcd/debug                                          Usage:     echo basi ...