当我按下主窗口上的暂停时,在其他窗口上倒计时器更新

时间:2015-07-23 08:59:26

标签: javascript jquery html5 countdown

我有一个带有管理面板的窗口,我可以调整时间暂停或停止倒计时,以及另一个用户看到相同计时器的窗口。当我在暂停时间从管理面板按下或调整时间+ - 我希望用户看到暂停或调整的时间。我该怎么做?我尝试使用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>

管理员窗口/标签 enter image description here

用户在另一个窗口/标签中看到的内容 enter image description here

@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();
?>

2 个答案:

答案 0 :(得分:2)

您必须在服务器上的某个位置存储计时器信息(有效,已暂停,结束),例如一个数据库。然后在侧面加载时读取它并用它创建一个定时器控件。您似乎还希望更新所有活动会话。为此,您需要使用websocketslongpolling在管理员更改计时器时向所有会话广播。查看http://signalr.net/的实时网络应用。

答案 1 :(得分:0)

您尝试创建实时Web应用程序。对于这些情况,使客户端每1秒钟左右查找信息变化效率非常低。更常见的是使服务器通知客户端有关更改,以便客户端可以相应地更新页面。此技术称为服务器发送事件(SSE)。这里,客户端 - 服务器套接字始终保持打开状态,并且可以来回传输数据。最好使用像Facebook这样的聊天Web应用程序来描述。在Facebook上创建用户登录套接字时。如果有人向您发送消息,则服务器端脚本会向客户端发送消息事件,客户端会向您显示消息。

使用像这样的服务器发送事件需要掌握服务器端脚本语言的知识: PHP,Ruby,Python,Node.js,ASP.NET 有很多可供选择。您还需要使用适当的套接字,例如Websockets

您需要创建一个服务器端脚本来侦听计时器更改并将该信息发送到浏览器(客户端)。然后,只要收到服务器端脚本消息,就可以使用JavaScript更新信息。如果要保存数据,您可能还需要设计和实现某种数据库。

服务器发送事件的一个非常简单的示例:http://www.w3schools.com/html/html5_serversentevents.asp

希望能回答你的问题。