如何显示计时器的进度百分比

-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。这确实会移动进度计时器，但会在页面刷新时重置。 –

如何显示计时器的进度百分比

回答

相关问题