转自：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. 10.Java web—JavaBean

    定义一个类,然后在jsp页面通过<jsp:useBean>标签调用 重点是类属性名要起得规则,一般是setXXX  getXXXX 新建一个类UserInfo public class U ...

  2. org.apache.catalina.connector.ClientAbortException: java.io.IOException: APR error:-32

    org.apache.catalina.connector.ClientAbortException: java.io.IOException: APR error:-32 Most likely, ...

  3. 【Android开发—智能家居系列】（三）：手机连接WIFI模块

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 概述 实现连接WIFI的功能会用到一个工具类,源码可以点击链接下载.网上这些类似的工具类里的代码差不多是一样的.连接无线网主要有 ...

  4. String、StringBuffer和StringBuilder的差别

    String.StringBuffer和StringBuilder的差别 1.String类是不可变类,即一旦一个String对象被创建后.包括这个对象中的字符序列是不可改变的 2.在字符串拼接的过程 ...

  5. linux系统（ubuntu14.04）安装mentohust完毕校园网锐捷认证

    近来升级电脑又一次做了系统.再次面临这linux系统下的各种校园网上网限制. 我在这里採用了mentohust来完毕锐捷认证. 这里我们选择Mentohust取代锐捷. Mentohust 是由华中科 ...

  6. ngnix

    nginx的平滑重启 博客分类: nginx nginx平滑重启  在研发过程中,修改nginx的配置文件nginx.conf是很平常的事,需要重启nginx.如果我们直接reload是有一定风险的, ...

  7. 新生入学V3.0颗粒归仓

    新生入学系统V3.0接近尾声.每次做项目都有不一样的收获.V1.0,V2.0主要是熟悉了整个项目流程是怎样进行的,可行性分析--需求分析(原型图Axure)--实体设计(PD)--类图时序图(EA)- ...

  8. Arduino 网络时钟client

    升级! 添加了12h/24h 的开关,还有标准/ 夏令时开关!见步骤7 & 步骤8. 你是否曾想要一个和办公室时间来源全然准确的表? 这就有一个网络的办公时间server,你能够根据它并同步你 ...

  9. AVL树，红黑树，B-B+树，Trie树原理和应用

    前言:本文章来源于我在知乎上回答的一个问题 AVL树,红黑树,B树,B+树,Trie树都分别应用在哪些现实场景中? 看完后您可能会了解到这些数据结构大致的原理及为什么用在这些场景,文章并不涉及具体操作 ...

  10. openwrt: patch-dtb

    dts的概念是linux kernel中的,跟openwrt的关系不大.只是恰好在学习openwrt的时候碰到了这个东西,所以记录在openwrt名下. patch-dtb openwrt对arch/ ...