setTimeout()

用于在指定的毫秒数后调用函数或计算表达式，只执行 code 一次。

setInterval()

可按照指定的周期（以毫秒计）来调用函数或计算表达式，不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

代码实现如下 

HTML部分

 <body>

 <div class="wrap">

     <input type="tel" class="shuru" id="phone"/>

     <button class="btn" id="send">发送</button>

 </div>

 </body>

1.setTimeout实现

标题为JSFidder的链接，js部分代码如下

 var wait=60;

 function time(){

     var btn=document.getElementById("send");

     var str=btn.innerText;

     if(wait==1){

         btn.innerText="再次发送";

         btn.removeAttribute("disabled");

         wait=60;

     }else{

         wait--;

         btn.innerText=wait+"s后重新获取";

         btn.setAttribute("disabled",true);

        setTimeout(function(){

            time();

        },1000);

     }

 }

 //点击button触发

 document.getElementById("send").onclick=time;

2.setInterval实现

js部分代码如下

 <script type="text/javascript">

 function time(){

     var wait=60;

     var btn=document.getElementById("send");

     btn.setAttribute("disabled",true);

     var timer=setInterval(function(){

         if(wait==1){

             btn.innerText="再次发送";

             btn.removeAttribute("disabled");

             wait=60;

             clearInterval(timer);

         }else{

             wait--;

             btn.innerText=wait+"s后重新获取";

         }

     },1000)

 }

 document.getElementById("send").onclick=time;

 </script>

js点击按钮倒计时setTimeout和setInterval的更多相关文章

  1. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  2. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  3. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  4. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  5. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

  6. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  7. [JS] 点击按钮触发后台事件前,弹出确认框

    只需要在button中设置onclick属性触发事件即可 下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID= ...

  8. js定时器的时间最小值-setTimeout、setInterval

    HTML5标准规定 setTimeout的最短时间间隔是4毫秒: setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒 书和MDC 在John Resig ...

  9. JS 点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. php微信接口实例

    <?php /** * wechat php test */ //define your token //定义TOKEN秘钥 define("TOKEN", "we ...

  2. js call()和apply()

    一.call()和apply(),实例如下: function add(a,b) {     alert(a+b); } function sub(a,b) {     alert(a-b); } a ...

  3. Windows 7 安装 .netfx 4 卡住

    net stop wuauserv rename \windows\SoftwareDistribution SoftwareDistribution_old net start wuauserv

  4. JSP+servlet简单登录实例

    一个简单的jsp+servlet实例,实现简单的登录 转载▼ http://blog.sina.com.cn/s/blog_5c5bc9070100z7wb.html     开发环境myeclips ...

  5. Hadoop的管理目录

    HDFS文件结构 1.NameNode的文件结构,NameNode会创建VERSION.edits.fsimage.fstime文件目录.其中dfs.name.dir属性是一个目录列表,是每个目录的镜 ...

  6. 顽皮的小球II

    感谢世外苏子恒同学提供   uses crt; var   x,y,xd,yd,xb,yb:shortint;   k:char; procedure intro; begin   clrscr;   ...

  7. day8-多进程和多线程

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. import threading import time def sayhi(num): #定义每个线程要 ...

  8. ubuntu下基于sqlite3后台的php环境的搭建

    最近准备把公司的服务器换成linux 数据库sqlite3 搭建过程记录如下: 1 sqlite3安装.. apt-get install sqlite 2.PHP服务器搭建. apt-get ins ...

  9. apache2 tomcat https配置-被忽悠进了CentOS 6

    因为需要让ios应用可以绕过appstore,要找个https的地方放ipa,决定使用已有http server. 首先需要说明的是,apache可以通过反向代理方式将用户的https分发到tomca ...

  10. EXT学习之——获取下拉框combobox的值与显示名

    //申请科室 var comboboxdept = new Ext.form.ComboBox({ xtype: "combobox", name: "Gender&qu ...