<!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. IntelliJ IDEA里找不到javax.servlet的jar包

    此处有小坑,请注意: https://mvnrepository.com网站查询到的servlet的包的格式为: provided group: 'javax.servlet', name: 'jav ...

  2. spring DelegatingFilterProxy管理过滤器

    安全过滤器链 Spring Security的web架构是完全基于标准的servlet过滤器的.它没有在内部使用servlet或任何其他基于servlet的框架(比如spring mvc),所以它没有 ...

  3. stm32串口学习（一）

    串口在工作中经常用到,今天我们从零开始学习stm32的串口编程(利用库函数). 先从最简单的情况开始,假设我们要实现的功能就是串口发送一个字节,不考虑接收,也不考虑中断. 那么要解决两个问题: 1 串 ...

  4. 用javascript实现禁止页面后退返回上一页的代码

    用javascript实现禁止页面后退返回上一页的代码:  有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法:  在需要跳转的页 ...

  5. pat1008. Elevator (20)

    1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The highest ...

  6. MVC 模型过滤

    通用返回模型 /// <summary> /// WebApi返回数据的泛型类 /// </summary> /// <typeparam name="T&qu ...

  7. 关于EasyUI datagrid 表头居中 数据列内容居右 或者居左

    cell.css("text-align",(col.halign||col.align||"")); 这里有个属性挺眼熟 : col.align 前面还有一个 ...

  8. Python常用模块(二)

    一.json与pickle json与pickle模块是为了完成数据的序列化. 序列化是指把对象(变量)从内存中变成可存储或传输的过程,在Python中叫picking,在其他语言中也由其他的叫法,但 ...

  9. P1576 最小花费

    题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...

  10. Smile with face. Smile with mind.

    Smile with face. Smile with mind.微笑不仅是挂在脸上的,更是发自心底的.