<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Insert title here</title>

        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

        <style type="text/css">

            .btn {

                width: 100px;

                height: 50px;

                background-color: lightgoldenrodyellow;

            }

        </style>

    </head>

    <body>

        <input type="button" id="btnid" name="butname" value="同意" class="btn" disabled="disabled" /><br /><br />

        <input type="button" id="btnCid" name="butname" value="变化" class="btn" disabled="disabled" />

        <!--    在页面中有一个同意按钮，要求按钮默认不可点击，

在5秒之后才可以点击这个按钮

按钮可用状态时，点击按钮，按钮变为不可用状态，在5秒之后才可以点击这个按钮

-->

        <script type="text/javascript">

            $(function() {

                showNumber();

            })

            function showNumber(){

                for(var i = 1; i <=5; i++) {

                    setTimeout("show("+i+")", i * 1000);//注意setTimeout方法中带参数的方法特殊处理,双引号不能包含变量

                }

            }

            function show(i){

                var x=6-i;

                $("#btnCid").val("变化 "+x);

//                alert(x);

                if(x==1){

                    setTimeout("showbtn()",1000);  //注意 效果有1秒的延迟,所以这里要等上1秒

                }

            }

            function showbtn(){

            alert("可用");

            $("#btnCid").removeProp("disabled");

            }

            $("#btnCid").click(function(){

            disablebtn();

            showNumber();

            })

            function disablebtn(){

            $("#btnCid").prop("disabled","disabled");

        }

        </script>

<!-- 下边这个不带倒计时数字 -->

        <!--<script type="application/javascript">

        $(function(){

            setTimeout("showbtn()",5000);

        });

        function showbtn(){

            alert();

            $("#btnid").removeProp("disabled");

        }

        $("#btnid").click(function(){

            disablebtn();

            setTimeout("showbtn()",5000);

        })

        function disablebtn(){

            $("#btnid").prop("disabled","disabled");

        }

    </script>-->

    </body>

</html>

JQuery 解决按钮上的倒计时问题的更多相关文章

  1. WPF解决按钮上被透明控件遮盖时无法点击问题

    原文:WPF解决按钮上被透明控件遮盖时无法点击问题 IsHitTestVisible="False" 在控件上设置如上属性即可,即可让透明控件不触发点击效果

  2. jQuery实现按钮5秒后可以点击

    废话少说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  3. 解决IE浏览器中点击按钮上传无效的问题

    前几天写了上传功能,点击按钮上传,在谷歌中是没有任何问题的: 但是在IE浏览器中点击没有任何效果 源代码如下:  后来发现在Firefox.IE浏览器中button标签内部可以含有其他标签,但是不能对 ...

  4. 使用jquery插件uploadify上传文件的方法与疑问

    我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...

  5. 用最简单的例子实现jQuery图片即时上传

    [http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jQuery_upload_image.html] 最近看了一些jQuery即时上传的插件, ...

  6. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  7. jQuery uploadify 文件上传

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...

  8. jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件

    借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...

  9. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

随机推荐

  1. python自学-day2（变量、if条件判断、运算符操作）

    1.变量 变量只是用于保存内存位置,将变量存储在内存中的作用,方便后面调用,这意味着,在创建变量时会在内存中开辟一个空间. 变量命名规则: 由字母.数字.下划线(_)组成 不能以数字开头 不能使用 P ...

  2. Django重新整理2

    Auth认证: 1.分配路由和创建视图函数 2.在视图函数中引用Django为我们提供的用户认证组建Auth 3.直接进行判断: def login(request): if request.meth ...

  3. jemeter+badboy录制脚本

    Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l       开源,他是一款开源的免费软 ...

  4. 搭建mysql集群，使用Percona XtraDB Cluster搭建

    Percona XtraDB Cluster提供的特性有:1.同步复制,事务要么在所有节点提交或不提交.2.多主复制,可以在任意节点进行写操作.3.在从服务器上并行应用事件,真正意义上的并行复制.4. ...

  5. DedeCms中Channel用typeid无效

    DedeCms中channel 用typeid调用无法达目的吗?请换成type试试! {dede:channel type='son' typeid='19' row='1'} <a href= ...

  6. httpd.conf 配置

    # # This is the main Apache server configuration file. It contains the # configuration directives th ...

  7. WebGL 踩坑系列-1

    WebGL 中的一些选项WebGL 中开启颜色混合(透明效果) gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALP ...

  8. Jersey初始化配置

    一 实际项目配置 公司VIP平台因为业务的特殊性,对业务数据的操作.以及前后端解耦等要求,使用到了jersey框架.同时使用到了spring框架. 二 jersey初始化 配置web项目配置文件web ...

  9. Model对象嵌套list赋值方式（备忘）

    首先定义Model对象:var deliveryInfoModel = new DeliveryInfo(); 第二步定义嵌套的list对象:var list = new List<Delive ...

  10. Maven常用插件整理

    maven内置变量 ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${basedir}; ${proj ...