直接上代码，亲自测试了的，没问题咯

第一种是按钮上直接显示倒计时，

<html>

<head>

<title>点击获取验证码按钮后按钮变灰，倒计时一段时间后又可重复点击</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

</head>

<body>

<input type="button" id="btn" value="免费获取验证码" onclick="timer(10)" />

<script type="text/javascript">

function timer(time) {

    var btn = $("#btn");

    btn.attr("disabled", true);  //按钮禁止点击

    btn.val(time <=  ? "免费获取验证码" : ("" + (time) + "秒后可发送"));

    var hander = setInterval(function() {

        if (time <= ) {

            clearInterval(hander); //清除倒计时

            btn.val("免费获取验证码");

            btn.attr("disabled", false);

            return false;

        }else {

            btn.val("" + (time--) + "秒后可发送");

        }

    }, );

}

</script>

</body>

</html>

第二种效果是点击按钮后，按钮被禁用，在另一处显示倒计时

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">

    </script>

    <style>

        * {

            margin: ;

            padding: ;

        }

        #ant {

            width: 150px;

            height: 50px;

            color: red;

            text-align: center;

            line-height: 50px;

            margin: 0px auto;

        }

    </style>

    <script>

        function test() {

            var count = ;

            var timer = null;

            timer = setInterval(function () {

                if (count > ) {

                    count = count - ;

                    $("#ant").html(count + "秒后再试");

                    $("#sendCode").attr("disabled", "disabled");

                }

                else {

                    $("#sendCode").removeAttr("disabled", "disabled");

                    $("#sendCode").html("发送验证码");

                    clearInterval(timer);

                }

            }, );

        }

    </script>

</head>

<body>

    <input type="button" value="发送验证码" onclick="test()" id="sendCode" />

    <div id="ant"></div>

</body>

</html>

有的朋友说第一种有问题，当使用来发送短信的时候，会发送两条短信，毛病还没找到，有解决了的大神麻烦指点下，谢谢了

JS倒计时，不会重复执行的更多相关文章

  1. js定时器整理(执行一次、重复执行)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环 ...

  2. js定时器(执行一次、重复执行)

    代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = ...

  3. js中click重复执行

    问题背景:在写一个非常简单添加方法的时候,用onclick事件调用添加方法,点击第一次没问题,第二次会重复执行,经过多次查找资料得知这个状况的解决方案,特意总结一下: 代码如下:点击#spec_for ...

  4. 【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval

    使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可 ...

  5. JS流程控制语句 反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。

    反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足. while语句结构: while(判断条件) { 循环语句 } 使用w ...

  6. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  7. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

  8. JS的预编译和执行顺序 详析

    原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <ht ...

  9. Spring的quartz定时器重复执行二次的问题解决

    Spring的quartz定时器同一时刻重复执行二次的问题解决 最近用Spring的quartz定时器的时候,发现到时间后,任务总是重复执行两次,在tomcat或jboss下都如此. 打印出他们的ha ...

  10. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

随机推荐

  1. Swift实战之2048小游戏

    上周在图书馆借了一本Swift语言实战入门,入个门玩一玩^_^正好这本书的后面有一个2048小游戏的实例,笔者跟着实战了一把. 差不多一周的时间,到今天,游戏的基本功能已基本实现,细节我已不打算继续完 ...

  2. BZOJ1036——树的统计count

    1.题目大意:给你一棵树,有三种操作 1>qmax,询问u到v中间点权的最大值 2>qsum,询问u到v中间点权和 3>change,把u这个节点的权值改为v 2.分析:树链剖分的裸 ...

  3. windows2008安装IIS

    一个朋友说不会使用2008搭建IIS.刚好我之后也要学习如何绕过waf需要安装一些环境.就帮个忙了,写这篇文章吧. 进入服务器管理. 添加角色 选择:WEB服务器(IIS)后会提示添加角色向导.那么久 ...

  4. ubuntu 出现g++ : Depends: g++-4.8 (>= 4.8.2-5~) but it is not going to be installed

    Ubuntu 你可以安装搜狗输入法也可以使用sunpingyin,看个人爱好. 唯一要注意的是,不能把系统的更新关了,否则会出现一大堆的问题,连g++都无法安装. 在设置里面: 我以前有一个很不好的习 ...

  5. HDU 1423 最长公共字串+上升子序列

    http://acm.hdu.edu.cn/showproblem.php?pid=1423 在前一道题的基础上多了一次筛选 要选出一个最长的递增数列 lower_bound()函数很好用,二分搜索找 ...

  6. QT国际化 一 (lupdate/linguits/lrelease)

    QT国际化(lupdate/linguits/lrelease) 本文由乌合之众瞎写http://www.cnblogs.com/oloroso/ qt国际化其实就是qt中字符串的字符集编码的设置.当 ...

  7. sublime text 个性设置

    http://stackoverflow.com/questions/13781833/sublime-text-2-how-to-change-the-font-size-of-the-file-s ...

  8. phpcms采集地址中为相对路径解决方法

    1.修改数据库v9_collection_node,增加两个字段replace_from,replace_to(varchar(200)) 2./phpcms/modules/collection/t ...

  9. 如何解决phpcms后台验证码不显示的问题

    方法一: 主要在于是否开启gd库 查看办法 找到php.ini文件 搜索extension=php_gd2.dll这段代码(windows) 然后把前面的;符号去掉即可. centOS6.5中可能需要 ...

  10. Linux CAT与ECHO命令详解 <<EOF EOF

    Linux CAT与ECHO命令详解 cat命令是Linux下的一个文本输出命令,通常是用于观看某个文件的内容的: cat主要有三大功能: .一次显示整个文件. $ cat filename .从键盘 ...