页面刷新时自动运行进度条（自动）答案

【问题标题】：progress bar to run automatically when page refresh (automatically)页面刷新时自动运行进度条（自动）
【发布时间】：2019-05-13 14:19:56
【问题描述】：

我每隔一分钟就从数据库中获取新数据。在网页上显示数据。当用户按下开始按钮时，数据更新将开始。然后页面会每分钟自动更新一次。我想添加一个显示时间的进度条。（它应该在用户按下开始按钮时启动。我管理它。但是随着页面自动刷新，它也应该在自动页面刷新后运行进度条。如何做到这一点？请任何建议。

<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>

【问题讨论】：

标签： javascript php html

【解决方案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();
 }

【讨论】：