要求：①点击按钮后背景色会发生改变
②有倒计时（一般为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. Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案

    点关注,不迷路:持续更新Java架构相关技术及资讯热文!!! 相信使用Mybaits的小伙伴们一定会经常编写类似如下的代码: 可以看到 userMapper 下有个红色警告.虽然代码本身并没有问题,能 ...

  2. Elasticsearch学习(一)————简单命令

    Elasticsearch一.简介**Elasticsearch 是一个分布式的搜索和分析引擎,可以用于全文检索.结构化检索和分析,并能将这三者结合起来.Elasticsearch 基于 Lucene ...

  3. ToDoList(原生JS)了解一下

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. let var const

    eslint要求变量声明使用const的,而不是let和var如果可能的话. 如果一个变量只有在声明时才被赋值一次,那么应该使用'const' 'use strict';(function() { v ...

  5. @Autowired @Resource @Inject 自动注入

    一.@AutoWired ( spring 的注解 )自动注入 /** * @Autowired: * 默认按照 Student 类型去容器中找对应的组件:applicationContext.get ...

  6. OA项目知识总结

    struts文件配置 --------------------------------------------------------- 配置c3po链接池 --------------------- ...

  7. ExtJs之Ext.XTemplate:数组填充，访问父对象

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  8. 王立平--split字符串切割

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. Cocos2dx之使用UI库结合cocostudio

    使用cocostudio的UI编辑器编辑好UI界面,导出UI文件,直接在cocos2dx中使用.通过tag或者name来获取到UI控件 1.编辑ui界面,直接用模板然后拖几个控件过去 2.cocos2 ...

  10. 原来C++之父在大摩工作呀，并且还是总经理。。

    摩根士丹利信息技术部门简历接收即将截止.请同学们抓紧投递 摩根士丹利9月.10月将在中国各大高校举办包含技术讲座.信息分享会以及校园宣讲会在 内的一系列校园活动.同学们将有机会和摩根士丹利高管以及返校 ...