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

时间:2016-10-04 17:56:02

标签: jquery

我有一个数学问题,我无法解决。我在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);
}

3 个答案:

答案 0 :(得分:0)

尝试:

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

答案 1 :(得分:0)

你应该改变这个:

SELECT *
FROM table1
CROSS JOIN table2

...因为var percent = (duration/interval)*100; 是一个与持续时间无关的标识符。

将其更改为:

interval

答案 2 :(得分:0)

如果我错了,请纠正我,但我想我可能还有另一种解决方法: (我不知道任何编码,但是请随时修改我的帖子)

x = total number of decimal seconds;
y = decimal seconds counting down

var percent = 100 - abs((1-(y/x)*100)