Jquery计时器倒计时和计数

时间:2015-11-10 10:56:33

标签: javascript jquery timer countdown

我正在努力追踪篮球比赛的时间。

我需要的是

  1. 倒数计时器,暂停并继续。 为此,我使用在的代码 http://jchavannes.com/jquery-timer/demo

  2. 我还需要跟踪每位玩家参加游戏的时间。并非所有玩家都同时参与游戏。

  3. 我想解决的问题。 1)能够从任何时间动态启动倒数计时器。我的意思是当页面开始时,每次的时间可能不同。 2)能够在计时器停止时向计时器添加或减少分钟或秒。 3)能够计算游戏中玩家的时间。也就是说当他们被替换时,他们的计算时间应该暂停并开始计算进入游戏的玩家的时间。 4)正如你所看到的,我创造了一个   var CustomPlayer1 = new(function(){...}   var CustomPlayer2 = new(function(){...}   我知道为所有球员创造所有这一切并不是最好的(两支球队可能24人)。如何更有效地创造这个?

  4. 从一开始。你可能需要的任何其他东西,以及可能帮助我做到这一点,我很乐意告诉你。

    到目前为止我所拥有的是以下内容。 (它远远不是我所需要的)

    <span id="stopwatchplayer1">00:10:00</span>
    <br/>
    <br/>
    
    <span id="stopwatchplayer2">00:10:00</span>
    <br/>
    <br/
    
    <h3>Example 2 - Countdown Timer</h3>
    <span id="countdown">10:00:00</span>
    <form id="example2form">
        <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle(), CustomPlayer1.Timer.toggle(), CustomPlayer2.Timer.toggle();' />
        <input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' />
        <input type='text' name='startTime' value='300' style='width:30px;' />
    </form>
    
    
    <script>
        var CustomPlayer1 = new (function() {
    
            // Stopwatch element on the page
            var $stopwatchplayer1;
    
            // Timer speed in milliseconds
            var incrementTime = 150;
    
            // Current timer position in milliseconds
            var currentTime = 0;
    
            // Start the timer
            $(function() {
                $stopwatchplayer1 = $('#stopwatchplayer1');
                CustomPlayer1.Timer = $.timer(updateTimer, incrementTime, true);  
            });
    
            // Output time and increment
            function updateTimer() {
                var timeString = formatTime(currentTime);
                $stopwatchplayer1.html(timeString);
                currentTime += incrementTime;
            }
    
            // Reset timer
            this.resetstopwatchplayer1 = function() {
                currentTime = 0;
                CustomPlayer1.Timer.stop().once();
            };
    
        });
    
        var CustomPlayer2 = new (function() {
    
            // Stopwatch element on the page
            var $stopwatchplayer2;
    
            // Timer speed in milliseconds
            var incrementTime = 150;
    
            // Current timer position in milliseconds
            var currentTime = 0;
    
            // Start the timer
            $(function() {
                $stopwatchplayer2 = $('#stopwatchplayer2');
                CustomPlayer2.Timer = $.timer(updateTimer, incrementTime, true);  
            });
    
            // Output time and increment
            function updateTimer() {
                var timeString = formatTime(currentTime);
                $stopwatchplayer2.html(timeString);
                currentTime += incrementTime;
            }
    
            // Reset timer
            this.resetstopwatchplayer2 = function() {
                currentTime = 0;
                CustomPlayer2.Timer.stop().once();
            };
    
        });
    
    
    /**
     * Example 2 is similar to example 1.  The biggest difference
     * besides counting up is the ability to reset the timer to a
     * specific time.  To do this, there is an input text field
     * in a form.
     */
    var Example2 = new (function() {
        var $countdown,
            $form, // Form used to change the countdown time
            incrementTime = 70,
            currentTime = 180000,
            updateTimer = function() {
                $countdown.html(formatTime(currentTime));
                if (currentTime == 0) {
                    Example2.Timer.stop();
                    timerComplete();
                    Example2.resetCountdown();
                    return;
                }
                currentTime -= incrementTime / 10;
                if (currentTime < 0) currentTime = 0;
            },
            timerComplete = function() {
                //alert('Example 2: Countdown timer complete!');
                console.log('Example 2: Countdown timer complete!');
            },
            init = function() {
                $countdown = $('#countdown');
                Example2.Timer = $.timer(updateTimer, incrementTime, true);
                $form = $('#example2form');
                $form.bind('submit', function() {
                    Example2.resetCountdown();
                    return false;
                });
            };
        this.resetCountdown = function() {
            var newTime = parseInt($form.find('input[type=text]').val()) * 100;
            if (newTime > 0) {currentTime = newTime;}
            this.Timer.stop().once();
        };
        $(init);
    });
    
    
    
    
    // Common functions
    function pad(number, length) {
        var str = '' + number;
        while (str.length < length) {str = '0' + str;}
        return str;
    }
    function formatTime(time) {
        var min = parseInt(time / 6000),
            sec = parseInt(time / 100) - (min * 60),
            hundredths = pad(time - (sec * 100) - (min * 6000), 2);
        return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths;
    }
    <script>
    

1 个答案:

答案 0 :(得分:1)

这是我想出的答案,对任何有兴趣的人来说。

我使用了kquynych昨天提出的jquery-runner。 github.com/jylauril/jquery-runner。

答案可以在http://jsfiddle.net/stefslam/mvx3jooz/7/

找到

风格

.in_out {
    width: 50px !important;
}
.cls_runner_in {
    color: green;
}
.cls_runner_out {
    color: red;
}
input[disabled=disabled], input:disabled {
    cursor: default;
    pointer-events: none;
    /*Button disabled - CSS color class*/
    color: #c0c0c0 !important;
    background-color: #ffffff !important;
}

HTML

<div id="container">
<span id="runner" data-state="1" data-start="600000"></span>

    <br />
    <br />
    <input type='button' id="StartStopButton" value='Play' />
    <input type='button' class="edit_runner" data-type="min" data-value="1" data-disable="60000" id="PlusMin" value='+1 Min' />
    <input type='button' class="edit_runner" data-type="min" data-value="-1" data-disable="60000" id="MinusMin" value='-1 Min' />
    <input type='button' class="edit_runner" data-type="sec" data-value="1" data-disable="1000" id="PlusSec" value='+1 Sec' />
    <input type='button' class="edit_runner" data-type="sec" data-value="-1" data-disable="1000" id="MinusSec" value='-1 Sec' />
    <input type='button' class="edit_runner" data-type="sec" data-value="10" data-disable="1000" id="PlusSecs" value='+10 Sec' />
    <input type='button' class="edit_runner" data-type="sec" data-value="-10" data-disable="1000" id="MinusSecs" value='-10 Sec' />
    <br />
    <br />Player 1 : <span id="runner1" class="cls_runner cls_runner_in" data-ingame="1" data-start="120000">00:00</span> 
    <input type='button' class="in_out" data-tospanid="1" value='In' />
    <br />
    <br />Player 2 : <span id="runner2" class="cls_runner cls_runner_in" data-ingame="1" data-start="221000">00:00</span> 
    <input type='button' class="in_out" data-tospanid="2" value='In' />
    <br />
    <br />Player 3 : <span id="runner3" class="cls_runner cls_runner_in" data-ingame="1" data-start="0">00:00</span> 
    <input type='button' class="in_out" data-tospanid="3" value='In' />
    <br />
    <br />Player 4 : <span id="runner4" class="cls_runner cls_runner_out" data-ingame="2" data-start="1244">00:00</span> 
    <input type='button' class="in_out" data-tospanid="4" value='Out' />
    <br />
    <br />Player 5 : <span id="runner5" class="cls_runner cls_runner_in" data-ingame="1" data-start="10000">00:00</span>

    <input type='button' class="in_out" data-tospanid="5" value='In' />
    <br />
    <br />Player 6 : <span id="runner6" class="cls_runner cls_runner_out" data-ingame="2" data-start="101022">00:00</span> 
    <input type='button' class="in_out" data-tospanid="6" value='Out' />
    <br />
    <br />
</div>

JAVASCRIPT

function Custom_millisecondsToString(milliseconds) {
    var oneHour = 3600000;
    var oneMinute = 60000;
    var oneSecond = 1000;
    var seconds = 0;
    var minutes = 0;
    var hours = 0;
    var result;

    if (milliseconds >= oneHour) {
        hours = Math.floor(milliseconds / oneHour);
    }

    milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;

    if (milliseconds >= oneMinute) {
        minutes = Math.floor(milliseconds / oneMinute);
    }

    milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;

    if (milliseconds >= oneSecond) {
        seconds = Math.floor(milliseconds / oneSecond);
    }

    milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;

    if (hours > 0) {
        result = (hours > 9 ? hours : "0" + hours) + ":";
    } else {
        result = "00:";
        result = "";
    }

    if (minutes > 0) {
        result += (minutes > 9 ? minutes : "0" + minutes) + ":";
    } else {
        result += "00:";
    }

    if (seconds > 0) {
        result += (seconds > 9 ? seconds : "0" + seconds);
    } else {
        result += "00";
    }
    //alert (result);
    return result;
}


$('.edit_runner').each(function () {
    $(this).prop('disabled', true);
});

function checkToDisableButtons() {

    var startstop_state = $('#runner').attr('data-state');

    //console.log($('#runner').attr('data-state'));
    //$('#runner').each(function() { alert($('#runner').attr('data-state')); });
    console.log(startstop_state);
    $('.edit_runner').each(function () {
        $(this).prop('disabled', true);
    });

    if (startstop_state == 1) {

        var runner_start = $('#runner').data('start');
        var runner_value = $('#runner').html();
        var piece_value = runner_value.split(':');
        var current_value_millisecond = (parseFloat(piece_value[0]) * 60 + parseFloat(piece_value[1])) * 1000;

        //$('.edit_runner').prop('disabled', true);

        console.log('runner_start-current_value_millisecond<60000 = ' + runner_start + '-' + current_value_millisecond + '<' + 60000 + ' = ' + (runner_start - current_value_millisecond));

        if (runner_start - current_value_millisecond > 60000) {
            //$('.edit_runner[data-type="min"][data-value="1"]').prop('disabled', false);
            $('#PlusMin').prop('disabled', false);
            //console.log('PlusMin');
        }
        if (current_value_millisecond > 60000) {
            $('#MinusMin').prop('disabled', false);
        }
        if (runner_start - current_value_millisecond > 1000) {
            $('#PlusSec').prop('disabled', false);
        }
        if (current_value_millisecond > 1000) {
            $('#MinusSec').prop('disabled', false);
        }
        if (runner_start - current_value_millisecond > 10 * 1000) {
            $('#PlusSecs').prop('disabled', false);
        }
        if (current_value_millisecond > 10 * 1000) {
            $('#MinusSecs').prop('disabled', false);
        }
        //alert (current_value_millisecond);

    }
}

$("div#container").on('click', '.in_out', function () {
    var temp_id;
    var temp_action;
    temp_id = $(this).data('tospanid');
    temp_val = $(this).val();
    //alert($(this).data('action')+' - '+$(this).val());
    if (temp_val == 'In') {
        $('#runner' + temp_id).css("color", "red").removeClass('cls_runner_in').addClass('cls_runner_out');
        $(this).val('Out');
        $(this).attr('data-action', 2);
    } else {
        $('#runner' + temp_id).css("color", "green").removeClass('cls_runner_out').addClass('cls_runner_in');
        $(this).val('In');
        $(this).attr('data-action', 1);
    }
});

$('#runner').each(function () {
    var $this = $(this);
    $this.runner({
        countdown: true,
        milliseconds: false,
        startAt: $this.data('start'), // alternatively you could just write: 10*60*1000 = 10 minutes data-start="10*60*1000"
        stopAt: 0, // 2(min) * 60(sec) * 1000(ms) = 120000
        format: function millisecondsToString(milliseconds) {
            return Custom_millisecondsToString(milliseconds);
        }
    }).on('runnerFinish', function (eventObject, info) {

        $('.cls_runner_in, .cls_runner_out').each(function () {
            $(this).runner('stop');
        });

    });
});

$('.cls_runner').each(function () {
    var $this = $(this);
    //console.log($this.data('start'));
    $this.runner({
        milliseconds: false,
        startAt: $this.data('start'), // $(this).data('start')
        //stopAt: $('#runner').data('start')
        format: function millisecondsToString(milliseconds) {
            return Custom_millisecondsToString(milliseconds);
        }
    });
});
//$('.cls_runner_in').runner('toggle');
//$('.cls_runner_out').runner('stop');


$("div#container").on('click', '#StartStopButton', function () {

    $('#runner').runner('toggle');

    $(this).val($(this).val() == 'Play' ? 'Pause' : 'Play');
    $(this).attr('data-state', $(this).attr('data-state') == '1' ? '2' : '1');
    $('#runner').attr('data-state', $(this).attr('data-state') == '1' ? '2' : '1');
    //console.log($(this).data('state'));
    checkToDisableButtons();

    $('.cls_runner_in').each(function () {
        var $this = $(this);
        //console.log($this.data('start')); 
        $this.runner('toggle');
    });

    //$('.cls_runner_out').runner('stop');
});

$("div#container").on('click', '.edit_runner', function () {
    var current_type;
    var current_value;

    //$("#my_time").val($('.runner').runner('getCurrentTime'));

    current_time = $('#runner').html();

    current_type = $(this).data('type');
    current_value = $(this).data('value');
    current_cls_value = $(this).data('value') * (-1);
    //alert (current_type+' - '+current_value);

    var piece = current_time.split(':');
    var current_millisecond = (parseFloat(piece[0]) * 60 + parseFloat(piece[1])) * 1000;
    //alert (piece[0]+'*'+60+' + '+piece[1]);
    //alert (current_millisecond);

    if (current_type == 'min') {

        var new_runner_time = current_millisecond + current_value * 60000;

        $('.cls_runner_in').each(function () {

            var $this = $(this);
            current_cls_time = $this.html();
            //console.log($this.data('start'));

            var piece_cls = current_cls_time.split(':');
            var current_cls_millisecond = (parseFloat(piece_cls[0]) * 60 + parseFloat(piece_cls[1])) * 1000;

            var new_cls_time = current_cls_millisecond + current_cls_value * 60000;
            $this.runner({
                milliseconds: false,
                startAt: new_cls_time,
                format: function millisecondsToString(milliseconds) {
                    return Custom_millisecondsToString(milliseconds);
                }
            });

        });

    } else {

        var new_runner_time = current_millisecond + current_value * 1000;

        $('.cls_runner_in').each(function () {

            var $this = $(this);
            current_cls_time = $this.html();
            //console.log($this.data('start'));

            var piece_cls = current_cls_time.split(':');
            var current_cls_millisecond = (parseFloat(piece_cls[0]) * 60 + parseFloat(piece_cls[1])) * 1000;

            var new_cls_time = current_cls_millisecond + current_cls_value * 1000;
            $this.runner({
                milliseconds: false,
                startAt: new_cls_time,
                format: function millisecondsToString(milliseconds) {
                    return Custom_millisecondsToString(milliseconds);
                }
            });

        });

    }

    //alert (mins);

    $('#runner').runner({
        countdown: true,
        milliseconds: false,
        startAt: new_runner_time, // alternatively you could just write: 10*60*1000 = 10 minutes data-start="10*60*1000"
        stopAt: 0, // 2(min) * 60(sec) * 1000(ms) = 120000
        format: function millisecondsToString(milliseconds) {
            return Custom_millisecondsToString(milliseconds);
        }
    });

    checkToDisableButtons();

});