带有消息html / javascript的进度栏

Question

I would like to put a personalized message in the area where it says: "Specific Messages," depending on the percentage of progress. 我想在进度栏上显示个性化消息：“特定消息”。

Example: - Up to 15%, display the message: "Start of download.." - Up to 30%, display the message: "Checking New Updates.." 示例：-最多15％，显示消息：“开始下载..”-最多30％，显示消息：“正在检查新更新..”

My Progressbar.html - http://jsfiddle.net/DgXM6/63/ 我的Progressbar.html- http://jsfiddle.net/DgXM6/63/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar - Custom Label</title>
  <link rel="stylesheet"     
      href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  .ui-widget-header {
    background: #3CE049
    url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
  }
  </style>
  <script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
      progressLabel.text( progressbar.progressbar( "value" ) + "%" );
    },
    complete: function() {
      progressLabel.text( "Complete!" );
    }
  });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 2 );

      if ( val < 99 ) {
        setTimeout( progress, 800 );
      }
    }

    setTimeout( progress, 2000 );
  });
  </script>
</head>
<body>

<div id="progressbar"><div class="progress-label">Loading...</div></div>
<span>Specific Message</span>
</body>
</html>

I hope you can understand me, thanks 希望你能理解我，谢谢

Answer 1

Why not a simple 'if' statement. 为什么不使用简单的“ if”语句。 Give your span an id='msg' and use this progress function: 给您的跨度一个id ='msg'并使用以下进度函数：

function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

  progressbar.progressbar( "value", val + 2 );

      if(val > 15){
          document.getElementById('msg').innerHTML = 'Checking for new updates';
      }
      if(val > 30){
          document.getElementById('msg').innerHTML = 'Some other msg';
      }
      if(val > 50){
          document.getElementById('msg').innerHTML = 'As many as you like';
      }
      if ( val < 99 ) {
        setTimeout( progress, 800 );
      }
    }

带有消息html / javascript的进度栏

问题描述

1 个解决方案

解决方案1
0 2015-04-02 21:18:12

带有消息html / javascript的进度栏

问题描述

1 个解决方案

解决方案1 0 2015-04-02 21:18:12

解决方案1
0 2015-04-02 21:18:12