如何显示文本以及JQuery进度条，并在完成后转发到其他JSP页面

How to Display Text along with JQuery Progressbar and forward to some other JSP page after completing?

本文关键字：转发 页面 JSP 其他 显示 何显示 文本 JQuery      更新时间：2023-09-26

我有进度条。如果它工作得很好，但我需要显示一些文本与进度条& &;当它达到100%时，它应该转发一个JSP页面。这是我的项目，增加了10%我想打印一些文本，比如:

  • 10% ->上传个人资料
  • 20% ->查看Email ID

  • 30% ->生成用户ID。
    ,
    重要的是，在达到100%后，必须将其转发给某个.jsp。如何做到这一点。请建议。这是我的程序:

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type='text/javascript'>
       var progress = setInterval(function() {
       var $bar = $('.bar');
         if ($bar.width()==400) {
           clearInterval(progress);
           $('.progress').removeClass('active');
         } else {
           $bar.width($bar.width()+40);
         }
         $bar.text($bar.width()/4 + "%");
       }, 800);
    </script>
</head>
<body>
   <script src="http://code.jquery.com/jquery.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <div class="container">
      <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
      </div>
   </div>
</body>
</html>
    在mystyle.css: 

    @import url('css/bootstrap.css');
.container {
  margin-top: 30px;
  width: 400px;
}

您可以使用Javascript使用window.location.replace

实现重定向
window.location.replace("http://example.com/finishedLoading");

您必须跟踪您的进度，并根据此显示消息。完成后，执行重定向。

根据你的例子:

<html>
<head>
<script type='text/javascript'>
  var progress = setInterval(function() {
    var $bar = $('.bar');
    if ($bar.width()==400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
        window.location.replace("http://example.com/finishedLoading");
    } else {
        $bar.width($bar.width()+40);
        switch($bar.width()){
            case 40: $("#status").html("Uploading Personal Details"); break;
            case 80: $("#status").html("Checking Email ID"); break;
            case 120: $("#status").html("Generating user ID"); break;
             // other case statements...
            case 400: $("#status").html("Finished"); break;
        }
    }
    $bar.text($bar.width()/4 + "%");
  }, 800);
</script>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
   <div class="progress progress-striped active">
       <div class="bar" style="width: 0%;"></div>
   </div>
   <br>
   <span id="status">
</div>
</body>
</html>

此处的进度直接保存在$bar.width()中。

相关文章：