要求：①点击按钮后背景色会发生改变
②有倒计时（一般为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. MySQL 5.7 安装过程中遇到的坑

    在安装的过程中遇到了几个坑,特地记录下来.启动的时候会有有个错误: 大意为mysql退出且更新不了pid文件. 查看error.log,如图: 大意为ibdtata1文件不够,初始化的时候页数太大.初 ...

  2. Integer Intervals POJ - 1716_查分约束_

    Code: #include<cstdio> #include<queue> #include<algorithm> using namespace std; co ...

  3. centos7安装nginx（基础篇）

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...

  4. nodejs 使用crypto实现sha256\md5加密

    var crypto = require('crypto'); var hash = crypto.createHash('sha256');// sha256或者md5 hash.update('1 ...

  5. nyoj92-图像有用区域【BFS】

    "ACKing"同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑色线圏成的区域以内的图片,现在请你来帮助他完成第一步,把黑色线圏外的区域全部变为黑色.    ...

  6. USB OTG学习笔记

    仅仅看了半天SPEC写的笔记,有些乱,等调试完毕再次整理,思路不是很成熟,推测成分较多,可能有不对的地方,欢迎拍砖交流指正.   1. 概要     OTG设备使用插头中的ID引脚来区分A/B Dev ...

  7. HTML常用标签简介及快速入门

    此HTML常用标签简介编写的目的,是给一个经常使用网页编辑器的一个朋友提供一个快速熟悉和入门HTML的途径. 现在分享出来,给其他有类似需求的朋友,此处只列出了编辑文章时最常用和遇到的标签,完整标签页 ...

  8. Python IO编程-读写文件

    1.1给出规格化得地址字符串,这些字符串是经过转义的能直接在代码里使用的字符串 需要导入os模块 import os >>>os.path.join('user','bin','sp ...

  9. MVC笔记(一)

    1 MVC介绍 MVC是一个编程思想. 是一种设计模式 思想: 将一个功能分解成3个部分, M: Model (模型) 处理数据相关的逻辑 V: View (视图) 显示页面 C: Controlle ...

  10. BA-siemens-insight在win7下如何配置opc接口

    一.运行环境:win7(OPC接口在win_xp下配置需安装插件,不好意思没搞定,现在只有win7系统32位下的教程了) 由于OPC(OLE for Process Control)建立在Micros ...