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. LeetCode Potential Thought Pitfalls

    Problem Reason Reference Moving ZeroesSort Colors Corner cases   Shortest Word Distance Thought: 2 p ...

  2. Composer设置忽略版本匹配的方法

    Composer简介 Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们.Composer 不是一个包管理器.是的,它涉及 "pa ...

  3. 微分方程——包络和奇解

    对某些微分方程,存在一条(也可能多条)特殊的积分曲线,它并不属于方程的积分曲线族.但是,在这条特殊的积分曲线上的每一点处,都有积分曲线族中的一条曲线和它在此点相切.在几何学上,这条特殊的积分曲线称为上 ...

  4. Chrome 调试动态加载的js

    今天有个同事问到我用chrome调试动态加载js的问题,这个问题之前遇到过,只是时间有点长了,有些忘记.在这里做一下记录: 在要调试的源码的后面加上 //@ sourceURL= debug.js 注 ...

  5. 用Visual Studio 2015 编写 MASM 汇编程序（一）环境配置

    原文地址:http://kipirvine.com/asm/gettingStartedVS2015/index.htm#CreatingProject 下面内容根据上面文章翻译整理而来! 开发32位 ...

  6. src与href属性的区别

    src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在 ...

  7. 关于sql server远程访问Oracle数据库 OpenQuery查询返回多条数据的问题

    在Sql Server远程访问Oracle 中的数据库表时: 远程语法通常为: select * from OpenQuery(Oracle链接服务器名称,‘查询语句’) eg: select * f ...

  8. TNS-12547 Linux Error: 104: Connection reset by pe (转载)

    TNS-12547 Linux Error: 104: Connection reset by peer 解决过程参考:http://blog.chinaunix.net/u/7121/showart ...

  9. php使用递归计算目录大小

    本文章向大家介绍php如何计算某个目录的大小(多少kb,多少兆m),主要使用filesize函数配合递归函数的方法来实现,需要的朋友可以参考一下本文章的源代码.php使用递归计算目录大小,主要使用fi ...

  10. 初学matlab----函数用法（随学习更新中）

    sort(A) 若A是向量不管是列还是行向量,默认都是对A进行升序排列. sort(A)是默认的升序,而sort(A,'descend')是降序排序. sort(A)若A是矩阵,默认对A的各列进行升序 ...