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

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

javascript jquery jsp

Javascript 如何与JQuery Progressbar一起显示文本，并在完成后转发到其他JSP页面？,javascript,jquery,jsp,Javascript,Jquery,Jsp,我有进度条。它工作正常，但我需要显示一些文本以及进度条&当它达到100%时，它应该转发一个jsp页面。这是我的程序，增加了10%&我想打印一些文本，如： 10%->上传个人详细信息 20%->检查电子邮件ID 30%->正在生成用户ID。 …… 重要的是，在它达到100%后，它必须转发到some.jsp。如何做到这一点。请建议。这是我的节目： <html> <head> <link rel="stylesheet" type="text/css" href

我有进度条。它工作正常，但我需要显示一些文本以及进度条&当它达到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>

您可以使用

窗口.位置.替换
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>


var progress=setInterval（函数（）{
变量$bar=$（'.bar'）；
如果（$bar.width（）==400）{
清除间隔（进度）；
$（'.progress'）.removeClass（'active'）；
window.location.replace（“http://example.com/finishedLoading");
}否则{
$bar.width（$bar.width（）+40）；
开关（$bar.width（））{
案例40:$（“#状态”）.html（“上传个人详细信息”）；中断；
案例80:$（“#状态”）.html（“检查电子邮件ID”）；中断；
案例120:$（“#status”）.html（“生成用户ID”）；中断；
//其他案件陈述。。。
案例400:$（“#状态”）.html（“完成”）；中断；
}
}
$bar.text（$bar.width（）/4+“%”）；
}, 800);



这里的进度直接保存在$bar.width（）
中。请给我完整的示例。我不明白。我怎么知道它是完整的。我的意思是我应该在哪里打电话&怎么打？还告诉我关于文本的内容。我更改了示例。我现在把你的改了。非常感谢。你真是天才。它非常有效。
<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>