开发者社区云计算文章正文

验证码60秒发送（获取验证码）demo效果示例（整理）

2023-09-15 57

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 验证码60秒发送（获取验证码）demo效果示例（整理）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>获取验证码</title>
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
    <script type="text/javascript">
      var countdown = 60;
      function send() {
        var obj = $("#btn");
        settime(obj);
      }
      function settime(obj) { //发送验证码倒计时
        if (countdown == 0) {
          obj.attr('disabled', false);
          obj.val("获取验证码");
          $("#btn").css("background", "#00bc12")
          countdown = 60;
          return;
        } else {
          obj.attr('disabled', true);
          obj.val("(" + countdown + ")S");
          countdown--;
          $("#btn").css("background", "#ccc")
        }
        setTimeout(function() {
          settime(obj)
        }, 1000)
      }
    </script>
    <style>
      #btn {
        width: 180px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        background: #00BC12;
        border-radius: 8px;
        font-size: 22px;
        border: 0;
        background: #00bc12;
        color: #fff;
      }
    </style>
  <body> 
        <input type="button" id="btn" value="获取验证码" onclick="send()" />
  </body>
</html>