转自：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. Linux出现cannot create temp file for here-document: No space left on device的问题解决

    在终端输入:cd /ho 按tab键时,显示错误: bash: cannot create temp file for here-document: No space left on device 这 ...

  2. 使用RTL-SDR，从打开一个车门到批量打开车门

    在最近几年,入侵汽车在当代社会的黑客圈中成为热点,很多文章表明汽车产业还有很多东西等待完善,在本篇文章中,我会让你熟悉我一直研究的一些概念,以及如何在网状网络中使用一些便宜的部件渗透远程开门系统. 软 ...

  3. git 更新远程分支

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

  4. BUPT复试专题—Python List(2014)

    题目描述 在Python中,List (列表)是一种非常重要的数据结构.它与C/C++/Java中的 数组有些类似,但支持添加新元素时的动态扩展.在这个问题中,你需要处理如下 的几种对List的操作. ...

  5. IE8.0登录Oracle EBS后报Oracle error 1403错

    IE8.0登录Oracle EBS后报错,登录页面打开没有问题.只是输入username和password然后登录,遇到下面错误: <PRE>Oracle error 1403: java ...

  6. ADO.NET EF 4.2 中的查询缓存（避免查询缓存）

    在WinForm系统中遇到了个问题,Form1是查询窗口,根据条件查询出所有数据,双击列表后创建弹出Form2窗口编辑单个记录,但编辑后保存后,在Form2中查询到的还是旧的数据,实际数据库中已经更新 ...

  7. 《Java虚拟机原理图解》4.JVM机器指令集

    0. 前言 Java虚拟机和真实的计算机一样,执行的都是二进制的机器码:而我们将.java 源码编译成.class 文件,class文件便是Java虚拟机可以认识的二进制机器码,Java可以识别cla ...

  8. ansible 基本命令学习与踩坑

    1. 命令行参数 -v,–verbose 详细模式,如果命令执行成功,输出详细的结果(-vv –vvv -vvvv) -i PATH,–inventory=PATH 指定host文件的路径,默认是在/ ...

  9. Arcgis Engine（ae）接口详解（8）：临时元素（element）

    //主地图的地图(map)对象 IMap map = null; IActiveView activeView = null; //IGraphicsContainer用于操作临时元素,可以通过map ...

  10. Java核心技术之基本数据类型

    这篇文章.我们讨论一些java的最主要的东西.这些东西我们一般刚刚学java的时候就学过,可是不一定真正明确. 正好,我在做一个读取内存的值,涉及到bit位的值的读取和写.那就能够讨论一个java的基 ...