zoukankan      html  css  js  c++  java
  • 修改密码成功后,倒计时三秒后,跳转到登录页面

    简单描述:需求上说,修改密码完成之后,要有个倒计时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

  • 相关阅读:
    python中的线程(zz)
    Bzoj1014 外星人Prefix
    ABC
    终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
    我去面试没带简历,你让我走人?
    利用Python框架pyxxnet_project实现的网络服务
    我以为我对Mysql索引很了解,直到我遇到了阿里的面试官
    CSS必备知识大全
    致 Python 初学者
    从入门到精通,Java学习路线导航
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/9855417.html
Copyright © 2011-2022 走看看