如下：

<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. 嵌入式单片机STM32应用技术（课本）

    目录SAIU R20 1 6 第1页第1 章. 初识STM32..................................................................... ...

  2. [BZOJ1814]Formula 1

    Description: 一个 m * n 的棋盘,有的格子存在障碍,求经过所有非障碍格子的哈密顿回路个数 Hint: \(n,m<=12\) Solution: 插头dp模板题,注意要讨论多种 ...

  3. C++学习笔记55：流类库与输入输出

    I/O流的概念及流类库的结构 程序与外界环境的信息交换 当程序与外界环境进行信息交换时,存在着两个对象:程序中的对象,文件对象. 流是一种抽象,负责在数据的生产者和数据的消费者之间建立联系,并管理数据 ...

  4. plsql 工具怎样导出 oracle 表结构

    一.双击 plsql 工具,输入登陆用户.登陆密码以及登陆数据库名称,如下图: 二.菜单 Tools --> Export User Objects...,如下图: 三.进入导出界面后,可以选择 ...

  5. spring中的多线程aop方法拦截

    日常开发中,常用spring的aop机制来拦截方法,记点日志.执行结果.方法执行时间啥的,很是方便,比如下面这样:(以spring-boot项目为例) 一.先定义一个Aspect import org ...

  6. nginx的http_sub_module模块使用之替换字符串

    Nginx可以实现很多功能,提供了许多插件,其中一个比较冷门的http_sub_module,是用来替换指定字符串的,它的原理是Nginx解析到文件后,执行这个插件进行拦截后返回. 昨天碰到一个场景, ...

  7. [Web 前端] mobx教程(二)-mobx主要概念

    cp from : https://blog.csdn.net/smk108/article/details/84960159 通过<Mobx教程(一)-Mobx简介>我们简单理解了Mob ...

  8. shell编程学习笔记（四）：Shell中转义字符的输出

    通过echo可以输出字符串,下面看一下怎么输出特殊转义字符,首先我先列出来echo的转义字符: \\ 输入\ \a 输出警告音 \b 退格,即向左删除一个字符 \c 取消输出行末的换行符,和-n选项一 ...

  9. 大疆无人机M100相关问题解决过程

    1.遥控器升级问题 iOS端使用app升级,重复尝试了5次+,还是无法升级.卸载app重新安装,依旧是无法升级.使用Android app升级,一次搞定. 2.飞行器固件升级(云台别选错了) http ...

  10. springcloud如何实现服务的平滑发布

    在之前的文章中我们提到服务的优雅下线,见: SpringCloud服务如何在Eureka安全优雅的下线 但这个对于ribbon调用其实是不平滑的,shutdown请求到后服务就马上关闭了,服务消费此时 ...