要求：①点击按钮后背景色会发生改变
②有倒计时（一般为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. Python基础：dict & set

    一 :dict 1:Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. eg: dict查找 ...

  2. Java将数据以Excel文件形式导出后台代码实现

    下面代码实现所需jar包: tomcat-embed-core-8.5.11.jar: commons-lang3-3.0.1.jar: commons-io-2.5.jar: poi-3.9.jar ...

  3. SQL SEVER 递归查询

    with ts as ( --首先要查询出最原始父级的信息 union all --全连接 select a.fitemclassid,a.fitemid, a.fnumber,a.Fparentid ...

  4. 微电影《Junior·BQB》——剧本

    电影名称:<Junior——BQB> 组长: 组员: 导演: 副导演: 分镜/演出: 编剧: 主演: 彬彬:比丘 阿伟:魔女(彬彬姐) 小怪:怪物团长 客串 旁白 友情演出: 恶俗之王 摄 ...

  5. JavaScript进阶【一】JavaScript模块化开发的基础知识

    //模块化的最初写法 //1.最初写法 //下面的m1和m2就组成了一个模块 //缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系. f ...

  6. 配置mysql允许远程访问

    1.进入 mysql: /usr/local/mysql/bin/mysql -u root -p 2.使用 mysql库 : use mysql; 3.查看用户表 : SELECT `Host`,` ...

  7. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  8. phthon中的open函数模式

    原文地址:http://www.runoob.com/python/python-func-open.html r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式 ...

  9. Centos6.5安装Seafile，遇到的问题处理记录。

    问题1:启动Seafile安装脚本时,提示找不到MySQL-python模块,使用yum安装成功也提示未安装该软件包 问题1解决方法:需要通过 python 的工具pip来安装MySQL-python ...

  10. android 异常解决方案汇总

    1)异常:Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法) 1.在工程下新建lib文件夹,将需要的第三方包拷贝进来. 2.将引用的第三方 ...