Question

人。我的PHP应用程序中有一个功能，我需要倒计时（或向上）。

我的客户将启动一个会运行一段时间的会话。我需要在页面上实时（或接近）显示此会话的状态。

例如，客户1可以在2016-10-04 12:50:00开始会话，该会话将运行9分钟。我从数据库中提取开始时间和持续时间，但为了便于阅读，在这里进行了硬编码。

for temp_row in inventory.rows:
    x += 1
print x #X will always return <= 100

正如您所看到的，我已经将开始时间和结束时间保存在jQuery中。

我需要做的是在页面上显示此会话的计时器。

例如：

第1节：2/9分钟。这会在会议结束时开始计分，然后在会议结束时停止。

有人可以帮我这个吗？

非常感谢，马克

Answer 1

首先输出更容易让javascript阅读的内容，例如时间戳

$stamp_start = $timeStarted->getTimestamp();
$stamp_end   = $timeEnding->getTimestamp();

echo "<span id='timeStarted' data-time='".stamp_start."'>".$timeStartedFormatted."</span>";
echo "<span id='timeEnding' data-time='".$stamp_end."'>".$timeEndingFormatted."</span>";

然后获取这些值

var date_start = $('#timeStarted').data('time') * 1000; 
var date_end   = $('#timeEnding').data('time') * 1000; 

// then get the difference

var diff = date_end - data_start;

然后使用setInterval

创建一个简单的计时器

function countDown(duration, element) {
    var timer = duration, minutes, seconds;
    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);

        if (--timer < 0) timer = duration;
    }, 1000);
}

以下完整示例

// populate elements for demonstration in lack of a server with PHP here
    function pad(n) { return n < 10 ? '0'+n:n }
    function format(d) {
    	// Y-m-d H:i:s
        return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+' '+
        pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
    }
    
	var date1 = new Date();
    var date2 = new Date();
    
    date2.setMinutes( date2.getMinutes() + 9 )
    
    $('#timeStarted').text(format(date1)).attr('data-time', date1.getTime()/1000);
    $('#timeEnding').text(format(date2)).attr('data-time', date2.getTime()/1000);
// -----------

function countDown(duration, element) {
    var timer = duration, minutes, seconds;
    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);

        if (--timer < 0) timer = duration;
    }, 1000);
}

var date_start = $('#timeStarted').data('time') * 1000; 
var date_end   = $('#timeEnding').data('time') * 1000; 

// then get the difference
var diff = date_end - date_start;
var sec  = diff/1000;
countDown(sec, $('#countdown'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='timeStarted' data-time=''></span><br />
<span id='timeEnding' data-time=''></span>
<br /><br />
<div id="countdown"></div>

算在jQuery中

1 个答案: