0

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

  • 10% -> 上传个人资料
  • 20% -> 检查电子邮件 ID。

  • 30% -> 生成用户 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;
}
4

1 回答 1

0

您可以使用 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().

于 2013-04-25T12:27:07.973 回答