要求：①点击按钮后背景色会发生改变
②有倒计时（一般为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. codeforce 788 A. Funtions again

    链接 A. Functions again 题意 这是一道求最大连续子序列和变形题. 做法 先将abs(a[i+1]-a[i]算出来,然后用两个数组dp[i],cp[i],dp维护其最大值,cp维护其 ...

  2. 洛谷P1654 OSU!_概率与期望

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 1000000 ...

  3. 路飞学城Python-Day151

    sprapy框架能够在pycharm中调试的方式 需要在配置文件中加上一个文件,文件的内容为 start.py #!/usr/bin/env python # -*- coding:utf-8 -*- ...

  4. [网络流24题] 最长k可重线段集问题 (费用流)

    洛谷传送门 LOJ传送门 最长k可重区间集问题的加强版 大体思路都一样的,不再赘述,但有一些细节需要注意 首先,坐标有负数,而且需要开$longlong$算距离 但下面才是重点: 我们把问题放到了二维 ...

  5. [luogu P2590 ZJOI2008] 树的统计 (树链剖分)

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  6. Ubuntu18.04 安装 oh-my-zsh

    目录 Ubuntu18.04 安装 oh-my-zsh 目录 安装zsh 安装curl 安装oh-my-zsh 使用zsh替换bash 修改终端主题和配色 修改终端配置 隐藏用户和主机名 效果图 Ub ...

  7. 使用Word2016直接发布博客

    使用Word2016直接发布博客

  8. WCF与各语言通信框架比较

  9. UI各种小控件的用法

    今天给大家列举出来UI中的一些小控件的用法.方便大的学习与使用 一些方法和属性我们能够查看API文档.不必将每一个控件的功能都记住, 由于在使用的过程中,我们能够查看API文档.方便使用,我们仅仅要记 ...

  10. java 基本数据类型及自己主动类型提升

    基本数据类型:8种 1.整型: byte    1个字节    8位    -128到127 short   2个字节    16位  -2^15到(2^15)-1 int    4个字节    32 ...