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. Hadoop学习10--常用命令记录帖

    1.列出所有正在执行的任务 hadoop job -list 2.kill任务 hadoop job -kill 任务名

  2. 黄聪： 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  3. UVA 247 电话圈(Floyd传递闭包+输出连通分量)

    电话圈 紫书P365 [题目链接]电话圈 [题目类型]Floyd传递闭包+输出连通分量 &题解: 原来floyd还可以这么用,再配合连通分量,简直牛逼. 我发现其实求联通分量也不难,就是for ...

  4. 虚拟机Ubuntu16，caffe环境搭建

    虚拟机下的Ubuntu16.04+caffe+onlycup 官网的step很重要,要跟着官网,的步骤来:http://caffe.berkeleyvision.org/installation.ht ...

  5. HelloWorld

    1.创建一src目录,并创建一个文本文件 2.将文件重命名为Hello.java,并用notepad打开 3.编写代码 4.将源代码编译为类文件 Java编译器(javac.exe)的作用是将Java ...

  6. c#数据类型之值类型和引用类型

    C#数据类型分隔为值类型和引用类型.而所用数据类型都继承自Object. 1. 值类型继承自System.ValueType,引用类型继承自System.Object.ValueType也直接继承自O ...

  7. 【javascript基础】6、new与构造函数

    前言 上篇说创建对象的时候提到了带返回值的构造函数,那里没有和大家说这个问题,今天就和大家一起学习构造函数和new操作符.我也是最近才稍微弄明白点这个构造函数,以前总是忽略一些问题,现在就是想到哪块不 ...

  8. MyBatis学习总结(六)——调用存储过程

    一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 create table p_user( id int primary key auto_incr ...

  9. CSS3 初步学习

    CSS3有一些是与旧版CSS2.1重叠的,有一些是没有浏览器支持的,全学没必要,下面只记录一下有用的. 一.CSS3边框 1.圆角border-radius border-radius:值越大,角越圆 ...

  10. JS 退出系统并跳转到登录界面的实现代码

    js代码如下: <script language="javascript" type="text/javascript"> function log ...