zoukankan      html  css  js  c++  java
  • js 定时器的使用。 setInterval()

    我需要实现的功能是:点击发送按钮,会出现 “已发送60s后可点击重发”,并且,60s 这个数字是随时变化的,60,59,58,57....0,然后再次返回到 发送 按钮。

    类似效果,可参考  360首页 找回密码 http://i.360.cn/findpwd/ 功能 中发送短信验证。。

    html 代码;

    <div>
       <a href="javascript:void(0)" class="get_a" id="code_get">获取短信验证码</a> 
    </div>

    css 代码:

    1 <style>
    2  .get_a{display:block; background:#cc0000; height:40px; line-height:40px; width:135px; color:#fff; text-align:center; font-size:14px; margin-top:15px;}
    3  .get_b{ background:#cbcdd0; color:#000; margin-left:5px;width:280px;height:40px; line-height:40px;text-align:center;font-size:14px; margin-top:15px;}
    4 </style>

    jQery 代码:

     1  <script type="text/javascript">
     2         $(function(){       
     3             var timer = null;
     4             var timeCount = 61;
     5             $("#code_get").click(function () {
     6                 if (timeCount == 61) {
     7                      timeCount = 60;
     8                      $("#code_get").addClass('get_b').html("如果未收到激活码,<b>" + timeCount + "</b>秒后请重新获取");
     9                      timer = setInterval(function () {
    10                           timeCount--;
    11                           $("#code_get").html("如果未收到激活码,<b>" + timeCount + "</b>秒后请重新获取");
    12                          if (timeCount == 0){
    13                              clearInterval(timer);
    14                              $("#code_get").removeClass('get_b').html("获取短信激活码");
    15                              timeCount = 61;
    16                          }
    17                      }, 1000);
    18                  }
    19        })
    20 </script>
  • 相关阅读:
    QQ 表情大全
    Linux/Unix同Windows文件传输
    CentOS 5.2安装Oracle 10g
    用户名、密码测试用例
    界面测试用例
    PLSQL导入导出数据库
    JavaScript代码格式规范和注意事项
    Node.js 之发送文件数据编码问题
    Node.js 之IP地址和端口号
    Node.js 之ContentType内容类型
  • 原文地址:https://www.cnblogs.com/xiaoxiao2014/p/3559409.html
Copyright © 2011-2022 走看看