javascript - 当我在主窗口上按下暂停时，倒计时器在其他窗口上更新

Question

我有一个带有管理面板的窗口，我可以在其中调整时间暂停或停止倒计时，而另一个窗口则让用户看到相同的计时器。当我从管理面板上按暂停时间或调整时间时 +- 我希望用户看到暂停或调整的时间。我怎样才能做到这一点？我尝试使用 iframe 但它没有改变，我可以尝试每 1 秒自动重新加载一次，但我认为这不好。所以我想要的是从一个窗口操纵时间并在另一个窗口上显示该时间。有人可以帮我解决这个问题吗？

html

<div id="defaultCountdown"></div>
<button type="button" id="pauseButton">Pause</button>
<button type="button" id="toggleButton">Toggle</button>

js

<script>
$(function () {
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
    $('#defaultCountdown').countdown({until: austDay, onTick: showPauseTime}); 

$('#pauseButton').click(function() { 
    var pause = $(this).text() === 'Pause'; 
    $(this).text(pause ? 'Resume' : 'Pause'); 
    $('#defaultCountdown').countdown(pause ? 'pause' : 'resume'); 
}); 

$('#toggleButton').click(function() { 
    $('#defaultCountdown').countdown('toggle'); 
}); 

function showPauseTime(periods) { 
    $('#showPauseTime').text(periods[4] + ':' + twoDigits(periods[5]) + 
        ':' + twoDigits(periods[6])); 
}
});
</script>

管理窗口/选项卡

用户在另一个窗口/选项卡中看到的内容

@Abraar Arique 这是我的代码，延迟了 2-3 秒

<?php 
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
include_once('db.php');
$stmt=$dbh->prepare("Select * FROM Mesaje where Game=0 order by ID_Mesaj desc limit 1");
$stmt->execute();
if ($row=$stmt->fetch())
{   
$id_indiciu=$row['ID_Indiciu'];
    if ($row['ID_Indiciu']!=0)
    {
        $stmtt=$dbh->prepare("Select * FROM Indiciu where  ID_Indiciu=$id_indiciu");
        $stmtt->execute();
        if ($rowz=$stmtt->fetch())
            {   
        echo "data: ".$rowz['Indiciu']."\n\n "; 
            }
    }
    else
    {
    echo "data: ".$row['Mesaj']."\n\n "; 
    }
}
ob_flush();
flush();
?>

Answer 1

您必须将计时器信息(事件、暂停、结束)存储在服务器上的某个位置，例如一个数据库。然后在侧面加载时读取它并用它创建一个计时器控件。看来您还想实时更新所有事件 session 。为此，当管理员更改计时器时，您需要使用 websockets 或 longpolling 向所有 session 广播。看看http://signalr.net/用于实时网络应用程序。