计时器2demo

最新推荐文章于 2024-10-13 06:44:27 发布

前端小云儿

最新推荐文章于 2024-10-13 06:44:27 发布

阅读量118

点赞数

分类专栏：组件文章标签： javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/119811823

版权

验证码前端开发 JavaScript 定时器用户体验

关键词由CSDN通过智能技术生成

组件专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="../css/mui.min.css" rel="stylesheet" />
       <style>
           .msgColor{
               color: #0000FF;
               font-weight: bold;
           }

       </style>
   </head>

   <body>
           <br />
       <div id="timeCode">点击获取验证码</div>
       <br />   <br />
           <input type="text" id="getSmsCode"/>

       <script src="../js/mui.min.js"></script>
       <script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
       <script type="text/javascript">
           $(function () {
              //获取短信验证码
               var validCodeTF = true;
              $("#timeCode").click (function () {

                  var time=5;
                  var codeInner=$(this);
                  if (validCodeTF) {
                      validCodeTF=false;
                      codeInner.addClass("msgColor");
                  var t=setInterval(function () {
                      time--;
                      codeInner.html(time+"秒");
                      if (time==0) {
                          clearInterval(t);
                      codeInner.html("重新获取");
                          validCodeTF=true;
                      codeInner.removeClass("msgs1");

                      }
                  },1000)
                  }
              })
           })
           </script>
   </body>