使用flipclock制作实时计时器

时间:2018-05-26 11:30:43

标签: javascript socket.io flipclock

我想用flipclock制作实时计时器。我有代码,但没有正常工作。在计时器中,当启动按钮单击计时器将在chrome(实时)的所有选项卡中启动,并且当停止按钮单击计时器将在所有选项卡中停止。在页面刷新中,如果计时器已经启动,则启动,如果已停止,则停止。

代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script>
    var socket = io.connect('//' + location.host + ':7878');
    // var autostart;
    var clock;
    $(document).ready(function() {
        clock = $('.clock').FlipClock(localStorage.getItem("timer") ? localStorage.getItem("timer") : 0, {
            clockFaceOptions:  {
                autoStart: false
            },
            onStart: function() {
                // autostart = true;
                socket.emit('socket_timer', clock.getFaceValue());
            },
            onStop: function() {
                // autostart = false;
            },
            onInterval: function () {
                console.log(clock.getFaceValue());
                localStorage.setItem("timer", clock.getFaceValue());
                // socket.emit('socket_timer', clock.getFaceValue());
            }
        });
        socket.on('server_socket_timer',function(data) {
            clock.setFaceValue(data);
            clock.start();
        });
        socket.on('server_clock_stop', function () {
            clock.stop();
        });
        $('#start').click(function () {
            clock.start();               
        });
        $('#end').click(function () {
            clock.stop();
            socket.emit('clock_stop');
        });
    });
</script>

请帮帮我。 提前谢谢!

0 个答案:

没有答案