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. Delphi 2010错误 ＂displayNotification: 内存不够＂

    打开 Delphi 2010 的时候, 它报一个错误 ＂displayNotification: 内存不够＂,从而无法使用 Delphi , 解决办法 摘自http://www.cnblogs.com ...

  2. WEB-INF目录下的文件访问权限(待解决)

    对于Tomcat服务器而言,WEB-INF目录下的文件是不能通过在浏览器中直接输入地址的方式来访问. 原因:还不清楚

  3. SparkContext源码阅读

    SparkContext是spark的入口,通过它来连接集群.创建RDD.广播变量等等. class SparkContext(config: SparkConf) extends Logging w ...

  4. PLSQL 逻辑多线程

    PROCEDURE get_sheetid(i_topic IN VARCHAR2, o_newsheetid OUT VARCHAR2) IS    PRAGMA AUTONOMOUS_TRANSA ...

  5. 鸟哥的linux私房菜学习

    cat /etc/shells 系统拥有的shellcat /etc/passwd 记录用户使用的shell按两次 tab 键可显示所有可执行的指令alias 查看所有命令的别名alias lm='l ...

  6. Javascript 基础知识学习--javascript中的参数传递都是按值传递的

    ECMAScript中所有函数的参数传递都是按值传递的,无论参数是值类型还是引用类型的.过去我跟大多数人一样觉得跟传值类型相关. 自己写了一个测试的例子,确实如此 function add(a) { ...

  7. EF 示例

    EF有三种数据库访问方式,这里只介绍Code First. 1.DB First,类似Linq to sql中拖拽一个DB到方案中 2.Model First,没试过,不能自动生成数据库只能生成表 3 ...

  8. [CF148E] Porcelain (分组背包)

    题目链接:http://codeforces.com/problemset/problem/148/E 题目大意:有n组数据,每次可以从任意一组的两端取出1个数,问你取m个数最大能组成多少? 思路:先 ...

  9. 货币单位类RmbUnit

    import java.math.BigDecimal; public enum RmbUnit { FEN{ public String toFen(String amt) { BigDecimal ...

  10. SAMEORIGIN

    http://www.css88.com/archives/5141 Response.AppendHeader("X-Frame-Options", "SAMEORIG ...