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. Angular SEO方案

    1.如果是java web项目,可以直接使用AngularSEO Filter. 官网地址 :http://www.angularseo.net/#about <filter> <f ...

  2. laravel 指定 版本安装

    composer create-project laravel/laravel=5.0.* --prefer-dist composer create-project laravel/laravel= ...

  3. centos修改hostname以及时间同步

    centos修改hostname 方法一: 执行命令:hostname test 则修改hostname为test 方法二: 永久修改hostname vi /etc/sysconfig/networ ...

  4. 用file上传文件时，浏览器返回值总是自动添加<pre>的解决办法

    在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...

  5. CCF NOI系列活动

    NOI-全国青少年信息学奥林匹克竞赛全国青少年信息学奥林匹克竞赛(NOI)是国内信息学领域内面向中学生的最高水平的大赛,每省派经选拔产生的选手(其中一名是女选手)参加,NOI每年在不同的省市举行. N ...

  6. tracer

    http://people.canonical.com/~acelan/coscup-2010/Debugging%20Linux%20Kernel%20by%20Ftrace.pdf http:// ...

  7. JavaWEB监听器

    1.基本概念 JavaWeb中的监听器是Servlet规范中定义的一种特殊类,它用于监听web应用程序中的ServletContext, HttpSession和 ServletRequest等域对象 ...

  8. 八、MPxToolCommand, tool command

    1. Tool Property Sheets: 是用来更改context属性的编辑框,类似于attribute editor.(property和attribute本质上是一个意思)作用于activ ...

  9. IOS畅销榜

    20W 在80-100  30W 在50左右  50W 在30左右  100W在20左右 N-1日的 收入  对N日还有权重的影响

  10. php接口post提交方法 （改良版）

    $postData = "reqType=2&caller=15088719619&called=15068722845"; $result = send_post ...