帶間隔的進度條

我正在嘗試創建一個帶有步驟和播放/暫停按鈕的進度條。

我在創建播放/暫停按鈕時遇到問題，但情況是加載進度條不應該被填充，只有在按下播放按鈕之后。

我無法弄清楚的第二種情況是，如果按下暫停按鈕，進度條正在運行，它應該在他當前所在的間隔結束時停止。

例如，如果我們按下播放鍵，如果在開始點和第 1 間隔之間按下暫停按鈕，進度條開始填滿，如果在第 1 間隔和第 2 間隔之間按下暫停按鈕，它應該在第 1 間隔結束時停止間隔，它應該繼續填充到第二個間隔結束等。

我希望我說清楚了。

var value = 0;

function barAnim() {
  value  = 1;
  $(".progress-bar").css("width", value   "%").attr("aria-valuenow", value);
  if (value == 25 || value == 55 || value == 100) {
    $(".progress-bar").append("<p style='position: absolute; text-align: right; width: 25%'>1st interval</p>");
    $(".progress-bar").append("<p style='position: absolute; text-align: right;width: 55%'>2nd interval</p>");
    $(".progress-bar").append("<p style='position: absolute; text-align: right;width: 100%'>3rd interval</p>");
    return setTimeout(barAnim, 500);

  }
  return value >= 100 || setTimeout(barAnim, 20);
}

setTimeout(barAnim, 1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="progress" style="width: 500px; position: relative;">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;background: green;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
<button onclick="barAnim()">Play</button>

這是codepen的鏈接：https ://codepen.io/Wildfactor/pen/WNMwbEP

uj5u.com熱心網友回復：

這是具有一些已定義檢查點的進度條的實作。按下播放按鈕后，按鈕標簽切換為“暫停”，進度條將開始前進。如果單擊暫停按鈕，則進度將前進到下一個檢查點并停止。

const checkpoints = [25, 55, 100];
const step = 1;
const timeInterval = 100;

//on document ready..
$(document).ready(()=>{
  
  for(checkpoint of checkpoints){
    $('#rulers')
      .append(`<p class='ruler' style='width:${checkpoint}%;'>${checkpoint}</p>`);
  }
        
  //attach click event handler to #playpause button
  $('#playpause').on('click', (event)=>{    
    const status = $(event.currentTarget).attr('data-status');  
    if (status == "pausing"){            
      $(event.currentTarget)
        .attr('data-status', 'playing')
        .text('Pause');    
      setProgressWithCheckpoints(checkpoints, step, timeInterval);
    }else if(status == 'playing'){
      $(event.currentTarget)
        .attr('data-status', 'pausing')
        .text('Play');
    }
  });
});

//set the progressbar at perc
function setProgress(perc){    
  $(".progress .progress-bar")
    .css('width', `${perc}%`)
    .attr('aria-valuenow', perc)
    .text(`${perc}`);    
}

//get progressbar %
function getProgress(){
  const valueNow = $(".progress .progress-bar")
                    .attr('aria-valuenow');
  return parseInt(valueNow);
}

function setProgressWithCheckpoints(intervals, step, ms){
  
  const valueNow = getProgress();     
  const nextIntervals =
    intervals.filter((interval) => interval > valueNow);      
  const nextInterval =
    (nextIntervals.length > 0) ? nextIntervals[0] : null;

  const newValue = Math.min(nextInterval, valueNow step);    
  setProgress(newValue);

  const playpauseStatus = $('#playpause').attr('data-status');

  //if progress got to 100% OR
  //   nextInterval got reached while the play button is in pause state
  if(newValue >= 100 || (nextInterval == newValue && playpauseStatus == 'pausing')){
     //do nothing (this was a cheap way to put the condition in positive terms) 
  }
  //else
  else
    //call again the progress function
    setTimeout(()=>{setProgressWithCheckpoints(intervals, step, ms)}, ms);  
}

.progress{  
  margin: 50px 20px 20px 0;
}

.progress{  
  display: flex;
  width: 100%;  
  height: 2rem;
  overflow: hidden;
  border: solid 1px lightgray;
  width: 100%;
}

.progress-bar{
  color: white;
  vertical-align: middle;
  font-weight: 600;
  padding: 2px 0;
}

#rulers {
  position: relative;
}

#rulers .ruler{
  position: absolute;
  text-align: right;
  margin-top: 0;
}

#playpause {
  display: block;
  cursor: pointer;
  margin-top: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 0%;background: green;">         
  </div>
</div>

<div id="rulers">
</div>

<button id="playpause" data-status="pausing">Play</button>

標籤：javascript jQuery 动画片 进步

上一篇：前端周刊：2022-6 期

下一篇：在reactnative的功能組件中使用animateCamera