js实现点击“验证码”开始倒计时 

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js实现倒计时</title>
    <!-- <script type="text/javascript" src="js/jquery.js"></script> -->
    <style>
      #getCode {
        margin: 0 auto;
        width: 284px;
        height: 34px;
        border: 1px solid #ccc;
        border-radius: 4px 4px;
      }

      input[type="text"] {
        padding: 11px 10px 8px 10px;
        border: none;
        border-radius: 4px 4px;
      }

      input[type="button"] {
        border: 0px;
        width: 86px;
        height: 20px;        
        color: #3399ea;
        font-size: 13px;
        cursor: pointer;
      }

    </style>
  </head>

  <body>
    <div id="getCode">
      <input type="text" placeholder="6位数字的验证码" id="number">
      <input type="button" id="get" width="150" value="获取验证码" onclick="settime(this)">
    </div>
    <script type="text/javascript">
      var countdown = 60;

      function settime(val) {
        if (countdown == 0) {
          val.removeAttribute("disabled");
          val.value = "获取验证码";
          countdown = 60;
        } else {
          val.setAttribute("disabled", true);
          val.value = countdown + "s";
          countdown--;
          setTimeout(function() {
            settime(val)
          }, 1000)
        }

      }

    </script>
  </body>

</html>

 

posted on 2018-09-01 16:53  云点西西  阅读(400)  评论(0)    收藏  举报

导航