如下：

<html>

<body>

        <input type="button" value="click" id="click" onclick="foo(this, 10000);"/>

</body>

<script>

function foo(obj, time) {

    obj.disabled = true;

    setTimeout(function() {

        var x = setInterval(function(){

                time= time - 1000; //reduce each second

                obj.value = (time/1000)%60;

                if(time==0){

                        clearInterval(x);

                        obj.value = "retry";

                        obj.disabled = false;

                }

        }, 1000);

    }, time-10000);

}

</script>

</html>

参考：

html button 点击 显示倒计时秒数的更多相关文章

  1. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  2. JavaScript--将秒数换算成时分秒

    getTime()  返回距 1970 年 1 月 1 日之间的毫秒数 new Date(dateString) 定义 Date 对象的一种方式 <!DOCTYPE html> <h ...

  3. 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏

    项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...

  4. PHP函数gmstrftime()将秒数转换成天时分秒

    http://yangjunwei.com/a/930.html PHP函数gmstrftime()将秒数转换成天时分秒   一个应用场景需要用到倒计时的时分秒,比如新浪微博授权有效期剩余: 7天16 ...

  5. ASP.NET div信息提示框显示几秒后隐藏

    今天在旧系统中,用户要求,要把一个javascript alert的信息提示,改为Div tag来显示,它在显示时,仅显示几秒,然后隐藏,这样无需用户去点击alert信息框的确定或是关闭铵钮. 下面I ...

  6. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  7. eclipse怎么显示代码行数

    熟悉java开发的朋友们肯定有这样的经验,那就是在用eclipse进行java开发的时候,没有显示代码的行数,这并不利于我们进行程序的调试.今天,小编就来教大家eclipse怎么显示代码行数     ...

  8. *ecshop 首页促销价显示倒计时

    1.打开includes/lib_goods.php 找到 get_promote_goods()函数部 在(注意:位置别找错了,大概在394行位置) $goods[$idx]['url'] = bu ...

  9. 自学Android的第一个小程序（小布局、button点击事件、toast弹出）

    因为上班,学习时间有限,昨晚才根据教程写了一个小程序,今天忙里偷闲写一下如何实现的,来加深一下印象. 首先创建一个Android项目, 通过activity_xxx.xml布局文件来添加组件来达到自己 ...

随机推荐

  1. [PA2014]Bohater

    [PA2014]Bohater 题目大意: 有\(n(n\le10^5)\)只怪物,你的血量为\(z\).要打败第\(i\)只怪物时,你需要先消耗\(d_i\)点生命值,再恢复\(a_i\)点生命值. ...

  2. [LOJ6469]Magic

    [LOJ6469]Magic 题目大意: 有\(n(n\le10^5)\)个物品,每个物品有一个权值\(w_i(w_i\le10^{18})\).求所有\(n\choose 2\)对物品\((i,j) ...

  3. [UOJ282]长度测量鸡

    思路: 数学归纳. 设最少所需刻度数为$s$,则$n和s$的关系为: $n=1,s=0;$ $n=2,s=1;$ $n=3,s=3;$ ... 观察发现$s=n(n-1)/2$,得到$sn$时,满足条 ...

  4. BZOJ3273 : liars

    枚举每个人,计算他必定是诚实者的情况下至少有几个人说谎,若超过$t$则他肯定是说谎者. 对于至少有几个人说谎,区间信息可以合并: 每个区间维护最左最右两个人$l,r$以及$f[i][j]$表示$l$和 ...

  5. 多重背包--java

    多重背包 有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是c[i],价值 是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大母函数的思想也 ...

  6. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  7. ES6_入门（5）_解构赋值

    学习参考:http://es6.ruanyifeng.com/#docs/destructuring //2017/7/20 /*对象的解构赋值*/ //对象的解构赋值,当变量名的对象的属性名相同时, ...

  8. web (Servlet)

    1.如果你文档新建的出现很多红色的小擦擦出错 这样做

  9. 具有相同名称 的类/接口已在使用。请使用类定制设置来解决此冲突。java调用第三方的webservice应用实例

    WSDLToJava Error: http://10.96.84.124:81/BTRPWebServiceForSMB/OnSMBOrderService.svc?xsd=xsd0 [0,0]: ...

  10. Spring Boot tomcat

    定制内嵌 Tomcat 设置内嵌Tomcat的端口 Spring Boot 内嵌的 Tomcat 服务器默认运行在 8080 端口.如果,我们需要修改Tomcat的端口,我们可以在 src/main/ ...