要求：①点击按钮后背景色会发生改变
②有倒计时（一般为30秒）

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>pro.html</title>

<style type="text/css">

.checkCode {

    cursor: pointer;

    border: 1px solid black;

    text-align: center;

    line-height: 26px;

    width: 115px;

    height: 35px;

}

</style>

<script type="text/javascript">

    var sleep = 30, interval = null;

    window.onload = function ()

    {

        var btn = document.getElementById ('btn');

        btn.onclick = function ()

        {

            if (!interval)

            {

                this.style.backgroundColor = 'rgb(243, 182, 182)';

                this.disabled = "disabled";

                this.style.cursor = "wait";

                this.value = "重新发送 (" + sleep-- + ")";

                interval = setInterval (function ()

                {

                    if (sleep == 0)

                    {

                        if (!!interval)

                        {

                            clearInterval (interval);

                            interval = null;

                            sleep = 30;

                            btn.style.cursor = "pointer";

                            btn.removeAttribute ('disabled');

                            btn.value = "免费获取验证码";

                            btn.style.backgroundColor = '';

                        }

                        return false;

                    }

                    btn.value = "重新发送 (" + sleep-- + ")";

                }, 1000);

            }

        }

    }

</script>

</head>

<body>

    <input class="checkCode" type="button" id="btn" value="免费获取验证码" />

</body>

</html>

用Javascript做一个“获取验证码”的按钮的更多相关文章

  1. clips 前端 js 倒计时 获取验证码的按钮

    <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...

  2. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

  3. Android中注册获取验证码倒计时按钮

    public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...

  4. 使用Canvas和JavaScript做一个画板

    本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...

  5. html,CSS,javascript 做一个弹窗

    弹窗的工作原理:在网页中写一个div ,布局到想要显示的位置,将display设为none,隐藏该div.然后通过点击事件或其他操作,利用Js代码,将display设置为block,将div 显示到网 ...

  6. 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...

  7. 接口测试入门（2）--get和post初级请求/使用httpclient做一个获取信息list的请求（需要登录才可以）

    抛去测试自动化的架构来,直接写单个测试用例的思路如下: 1.获取测试case的接口,对每一个接口的请求方式(get/post/delete/put)进行分析,是否需要参数(不同的用例设置不同的参数,如 ...

  8. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  9. 用python做一个图片验证码

    看一下做出来的验证码长啥样 验证码分析 1. 有很多点 2. 有很多线条 3. 有字母,有数字 需要用到的模块: 1. random 2. Pillow  (python3中使用pillow) 安装p ...

随机推荐

  1. vc++绘图，颜色

    新建mfc应用程序,Graphic ,单文档 添加菜单项,点,直线,矩形,椭圆 建立类导向 MFC ClassWizard,为菜单项添加命令响应 添加成员变量 在CGraphicView构造函数中进行 ...

  2. 原生node写一个静态资源服务器

    myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...

  3. docker 命令部分

    本文只记录docker命令在大部分情境下的使用,如果想了解每一个选项的细节,请参考官方文档,这里只作为自己以后的备忘记录下来. 根据自己的理解,总的来说分为以下几种: 看一个变迁图   看一个变迁图 ...

  4. 【hiho一下 第九周】 状态压缩·二

    [题目链接]:http://hihocoder.com/problemset/problem/1048 [题意] [题解] 按从左到右然后从上到下的顺序; 依次枚举每个格子是竖条还是横条; 然后在搜索 ...

  5. RabbitMQ学习总结（7）——Spring整合RabbitMQ实例

    1.RabbitMQ简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现.  官网:http://www.rabbitmq. ...

  6. static类型autowired 注入失败

    原代码:注入commonService对象失败 @Autowired private static CommonService commonService; public static List< ...

  7. 操作服务器及MySQL数据库可以使其远程链接

    转自原文操作服务器及MySQL数据库可以使其远程链接 一般情况分三个地方准备,MySQL数据库,防火墙,还有你的服务器主机的准备 操作系统为centos6.5.其他系统大致差不多. 1:在服务器中安装 ...

  8. [HTML 5] More about ARIA Relationships

  9. GO语言UDP小笔记

    <pre style="margin-top: 0px; margin-bottom: 0px;"><span style=" color:#0000f ...

  10. 创建逻辑dg

    逻辑备用DG   今天是2014-04-29,近期一直忙的事情,也没来的急写点东西.今天继续整理dg的相关内容,要说的是逻辑dg的创建过程和注意事项. 什么是逻辑dg呢?物理dg类似于主库的完整副本. ...