Question

我每分钟从数据库中获取新数据。在网页上显示数据。当用户按下开始按钮时，数据更新将开始。然后页面将自动每分钟更新。我想添加一个显示时间的进度条。（它应该在用户按下START按钮时启动。我对其进行了管理。但是随着页面自动刷新，它也应该在页面自动刷新后运行进度栏。如何执行此操作？请提出任何建议。

<body>
   <div id="progressBar">
   <div></div>
  </div>


  <script type="text/javascript">
  function progress(timeleft, timetotal, $element) {
  var progressBarWidth = timeleft * $element.width() / timetotal;
  $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " seconds to go");
  if(timeleft > 0) {
      setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
      }, 1000);
  }
};
  </script>


  <script>
    $(document).ready(function(){
      $('#MyButton').click(function(){
         progress(60, 60, $('#progressBar'));
      });
    });
  </script>


  <input type="button" value="START" id="MyButton" >


  </body>

Answer 1

您可以使用sessionStorage存储剩余时间变量，因为该变量存储在用户浏览器中。 https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

function progress(...) {
   .
   .
   sessionStorage.setItem('timeleft', timeleft);
   .
 }

 function checkAutoStart() {
    var timeleft = sessionStorage.getItem('timeleft');
    if(timeleft && timeleft > 0) {
        progress(timeleft, 60, $('#progressBar'));
 }

 $(document).ready(function() {
    .
    .
    checkAutoStart();
 }

进度栏在页面刷新时自动运行（自动）

1 个答案: