修改密码成功后，倒计时三秒后，跳转到登录页面

Posted 2021-01-15 xuchao0506

简单描述：需求上说，修改密码完成之后，要有个倒计时3秒，倒计时完成之后，才返回到登录页面，而不是修改完密码，立即返回到登录的页面

代码：

//html代码
<div class="portlet light bordered" id="loginbox">
       <div class="tab-content">
           <div class="row">
               <form action="" class="horizontal-form" method="post" id="searchForm" autocomplete="off">
                   <div class="col-md-12">
                       <div class="col-md-6">
                           <label class="control-label flex" style="margin-top: 10px;">
                               原密码：
                           </label>
                       </div>
                   </div>
                   <div class="col-md-12">
                       <div class="col-md-6">
                           <div class="control-group">
                               <div class="controls">
                                   <div class="main_input_box">
                                       <input type="password" name="name" id="passwordOri" class="form-control"
                                              placeholder="请输入原密码"
                                              maxlength="50" allowKeyboard="true" value=""/>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="col-md-12">
                       <div class="col-md-6">
                           <label class="control-label flex" style="margin-top: 10px;">
                               新密码：
                           </label>
                       </div>
                   </div>
                   <div class="col-md-12">
                       <div class="col-md-6">
                           <div class="control-group">
                               <div class="controls">
                                   <div class="main_input_box">
                                       <input type="password" name="name" id="passwordNew" class="form-control"
                                              placeholder="请输入新密码"
                                              maxlength="50" allowKeyboard="true" value=""/>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="col-md-12">
                       <div class="col-md-6">
                           <label class="control-label flex" style="margin-top: 10px;">
                               确认新密码：
                           </label>
                       </div>
                   </div>
                   <div class="col-md-12">
                       <div class="col-md-6">
                           <div class="control-group">
                               <div class="controls">
                                   <div class="main_input_box">
                                       <input type="password" name="name" id="passwordCon" class="form-control"
                                              placeholder="确认新密码"
                                              maxlength="50" allowKeyboard="true" value=""/>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </form>
               <div class="col-md-6" style="margin-top: 10px;float: right;clear: right" id="showmsg">
                   <button class="btn sbold default" id="resetConten" style="float: right;margin-left: 10px;">
                       <span class="ladda-label">清空</span>
                   </button>
                   <button class="btn sbold blue" id="confirm" style="float: right;">
　　　　　　　　　　　　　<span class="ladda-label" onclick="checkServer()">确认修改</span>
                   </button>
               </div>
           </div>
       </div>
   </div>

//js代码
$.ajax({
    type: "POST",
    url: rootPath + ‘/pri/user/changePassword‘,
    data: {keyData:code},
    dataType:‘json‘,
    cache: false,
    success: function(data){
        if("success" == data.result){
           $("#loginbox").tips({
              sids:1,
              msg:"修改成功，将在3秒后返回登录界面，请重新登录！",
              bg : ‘#FF5080‘,
              time:3
           });
           var t=parseInt(3);
           window.setInterval(function () {
               if(t>0){
                   $("#showmsg").html(‘还剩下<a class="flip-link btn btn-info">‘+t+‘秒‘+‘</a>秒刷新‘);
               }else{
                   var path = rootPath+‘main/logout‘;
                   top.location.href=path;
               }
               t--;
           },1000);
        }else if("fail" == data.result){
           $("#passwordOri").tips({
               side : 1,
               msg : "原始密输入不正确",
               bg : ‘#FF5080‘,
               time : 3
           });
           $("#passwordOri").focus();
                return false;
        }else{
           $("#passwordOri").tips({
               side : 1,
               msg : "异常",
               bg : ‘#FF5080‘,
               time : 3
           });
         $("#passwordOri").focus();
              return false;
       }
   }
});

总结：代码就这一点，主要用到了 window.setInterval(code, delay), 具体了解请查阅https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval