如何顯示計時器的進度百分比

-1

我有一個數學問題，我不能解決。我正在UNIX時間戳工作。我有一個進程的開始時間，進程的結束時間，以及給定進程的長度（以秒爲單位）。我想在我的頁面上顯示進度表，顯示已完成的百分比。如何顯示計時器的進度百分比

我有一個功能，它顯示一個倒數計時器，每1000毫秒滴答。我想在每次打勾時更新進度表。

任何人都可以幫我用公式來獲得完成的百分比嗎？

TIA

// WE NEED TO PULL THE BED START TIME AND DURATION FROM THE DATABASE // 
$bedMinQ = "SELECT bedId, sessionDate, minutesUsed FROM tanningHistory WHERE bedId = '".(int)$row->id."' ORDER BY id DESC LIMIT 1"; 
if($bedMinRes=$con->query($bedMinQ)) 
{ 
    while($bedMinRow = $bedMinRes->fetch_object()) 
    { 
     $minutesUsed = $bedMinRow->minutesUsed; 
     $sessionDate = $bedMinRow->sessionDate; 
    } 
} 
// GET THE TIME THAT THE SESSION STARTED // 
${'timeStarted'.$row->id} = new DateTime($sessionDate); 
// GET THE TIME THAT THE SESSION STARTED AND PLACE IN A VARIABLE THAT CAN BE EDITED INDEPENDENTLY // 
${'timeStartedToEdit'.$row->id} = new DateTime($sessionDate); 
// GET THE END TIME OF THE SESSION // 
${'timeEnding'.$row->id} = ${'timeStartedToEdit'.$row->id}->modify('+'.$minutesUsed.' minutes'); 
// GET THE START TIME OF THE SESSION AS A TIMESTAMP // 
${'stamp_start'.$row->id} = ${'timeStarted'.$row->id}->getTimestamp(); 
// GET THE END TIME OF THE SESSION AS A TIMESTAMP // 
${'stamp_end'.$row->id} = ${'timeEnding'.$row->id}->getTimestamp(); 
$timeNow = new DateTime(date('Y-m-d H:i:s')); 
$now = $timeNow->getTimestamp(); 
$duration = $minutesUsed*60; 
// ${'timeStartedFormatted'.$row->id} = ${'timeStarted'.$row->id}->format('Y-m-d H:i:s'); 
// ${'timeEndingFormatted'.$row->id} = ${'timeEnding'.$row->id}->format('Y-m-d H:i:s'); 
echo "<span id='timeStarted".$row->id."' style='display: none' data-".$row->id."='".${'stamp_start'.$row->id}."'></span>"; 
echo "<span id='timeEnding".$row->id."' style='display:none' data-".$row->id."='".${'stamp_end'.$row->id}."'></span>"; 
echo "<span id='now' style='display:none'>".$now."</span>"; 
echo "<span id='duration' style='display:none'>".$duration."</span>"; 

<div class="dashboard-stat2 bordered"> 
    <div class="display"> 
     <div class="number"> 
      <h3 class="font-blue-sharp"> 
       <span data-counter="counterup" data-value="00.00" id="countdownBed<?php echo $row->id; ?>">00.00</span> 
      </h3> 
      <small><?php echo $row->bedName; ?></small> 
     </div> 
     <div class="icon"> 
      <i class="fa fa-clock-o"></i> 
     </div> 
    </div> 
    <div class="progress-info"> 
     <div class="progress"> 
      <span id="progress<?php echo $row->id; ?>" style="width: 45%;" class="progress-bar progress-bar-success red-flamingo"> 
       <span class="sr-only">45% grow</span> 
      </span> 
     </div> 
     <div class="status"> 
      <div class="status-title"> grow </div> 
      <div class="status-number"> 45% </div> 
     </div> 
    </div> 
</div> 
// START ON THE TIMER FOR THE SUNBEDS // 
var date_start = $('#timeStarted'+<?php echo $row->id; ?>).data('<?php echo $row->id; ?>') * 1000; 
var date_end = $('#timeEnding'+<?php echo $row->id; ?>).data('<?php echo $row->id; ?>') * 1000; 
var now = $('#now').text() * 1000; 
var duration = $('#duration').text()*1000; 
console.log(duration); 
// then get the difference 
var diff = date_end - now; 
if(diff<0) 
{ 
    var sec = 0; 
} else { 
    var sec = diff/1000; 
} 
countDownBed<?php echo $row->id; ?>(sec, $('#countdownBed'+<?php echo $row->id; ?>)); 

function countDownBed<?php echo $row->id; ?>(duration, element) { 
    var timer = duration, minutes, seconds; 
    var interval = setInterval(function() { 
     minutes = parseInt(timer/60, 10); 
     seconds = parseInt(timer % 60, 10); 
     minutes = minutes < 10 ? '0' + minutes : minutes; 
     seconds = seconds < 10 ? '0' + seconds : seconds; 
     element.text(minutes + ':' + seconds); 
     var percent = (duration/interval)*100; 
     $('#progress'+<?php echo $row->id ?>).css('width', percent+'%'); 
     if (--timer < 0) clearInterval(interval); 
    }, 1000); 
}

來源

2016-10-04 Mark Bell

您可以發佈您現有的代碼，你有什麼？ – tymeJV

你知道獲得百分比的基本數學嗎？ – epascarello

添加了@tymeJV代碼。 –

嘗試：

var percentComplete = 100; 
if(Date.now() < date_end) { 
    percentComplete = (Date.now() - date_start)/(date_end - date_start) * 100; 
}

來源

2016-10-04 18:06:09 mwoelk

恐怕沒有工作，哥們。從頭到尾有730％的成績。感謝您的輸入雖然:) –

好吧，只是意識到你不更新你的現在var在計時器滴答。嘗試立即設置到計時器記號中的當前時間戳。 – mwoelk

我編輯了我的答案。你能再試一次嗎？ – mwoelk

你應該改變這樣的：

var percent = (duration/interval)*100;

...因爲interval是無關與持續時間的標識符。

它改成這樣：

var percent = (1 - timer/duration)*100;

來源

2016-10-04 18:14:52 trincot

感謝@trincot。這確實會移動進度計時器，但會在頁面刷新時重置。 –

如何顯示計時器的進度百分比

回答

相關問題