Question

我有进度条。我工作正常，但我需要显示一些文本以及进度条和＆amp;当它达到100％时，它应该转发一个jsp页面。这是我的计划，增加了10％＆amp;我想打印一些文字，如：

10％ - ＆gt;上传个人详细信息
20％ - ＆gt;检查电子邮件ID。

30％ - ＆gt;生成用户ID。
.... 重要的是，在达到100％之后，它必须转发到some.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;
}

Answer 1

您可以使用window.location.replace

使用Javascript进行重定向

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()。

中

如何与JQuery Progressbar一起显示文本并在完成后转发到其他JSP页面？

1 个答案: