<!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. java 与 数据库的连接

    Eclipse中使用SQL server 2017数据库 一.准备材料 要能够使用数据库就要有相应的JDBC,所以我们要去Microsoft官网下载https://www.microsoft.com/ ...

  2. leetcode 620. Not Boring Movies 用where语句判断

    https://leetcode.com/problems/not-boring-movies/description/ 不管题目简不简单,现在先熟悉语法. 直接用where语句判断即可,判断奇偶可以 ...

  3. 转:Android中的Handler的机制与用法详解

    注:Message类的用法: message的几个参数都可以携带数据,其中arg1与arg2可以携带int类型,what是用户自定义的int型,这样接受者可以了解这个消息的信息. 说明:使用Messa ...

  4. Classes as objects

    Before understanding metaclasses, you need to master classes in Python. And Python has a very peculi ...

  5. 探讨PHP获取checkbox值

    如何才能正确的实现PHP获取checkbox值对于初学者来说还是比较陌生的.在这里我们将为大家详细介绍相关的实现方法,希望对大家有所帮助. > > > weeks后的中括号不可漏,否 ...

  6. Quartz使用(4) - Quartz监听器Listerner

    1. 概述 Quartz的监听器用于当任务调度中你所关注事件发生时,能够及时获取这一事件的通知.类似于任务执行过程中的邮件.短信类的提醒.Quartz监听器主要有JobListener.Trigger ...

  7. 学习JVM-GC原理

    1. 前言 Java和C++之间显著的一个区别就是对内存的管理.和C++把内存管理的权利赋予给开发人员的方式不同,Java拥有一套自动的内存回收系统(Garbage Collection,GC)简称G ...

  8. schema中属性声明

    <attribute name="属性名"   default="默认值"  fixed="固定值" use="option ...

  9. Debug Diagnostics Tool创建.Net异常转储并用Windbg分析异常

    当我们要在IIS PRD环境下分析异常,并且对问题毫无头绪,又没有权限直接上打Log的代码.这个时候就是Debug Diagnostics Tool & Windbg大显神威的时候了. Deb ...

  10. intellijidea课程 intellijidea神器使用技巧 4-1 重构

    1 重构变量 shift + F6 将选中的变量以及用到该变量的部分全部修改 2 重构方法 Ctrl  + F6 重构变量