javascript - Jquery定时器倒计时和计数

Question

我正在尝试计算篮球比赛的时间。

我需要的是

1. 具有暂停和继续功能的倒计时器。 为此，我使用在以下位置找到的代码 http://jchavannes.com/jquery-timer/demo

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

3. 我想解决的问题。 1)能够随时动态启动倒计时器。我的意思是，当页面启动时，每次的时间可能不同。 2) 能够在计时器停止时增加或减少分钟或秒。 3)能够统计玩家在游戏中的时间。也就是说，当他们被替换时，他们的计时应该暂停，并开始计算上场球员的时间。 4)如你所见，我创建了一个 var CustomPlayer1 = new (function() { ... } var CustomPlayer2 = new (function() { ... } 我知道为所有球员(两队可能有 24 名球员)创造这一切并不是最好的。如何更有效地创建它？

这就是开始。如果您需要了解并可能帮助我做到这一点，我将很乐意告诉您任何其他信息。

到目前为止我所拥有的内容如下。 (距离我需要的东西很远)

<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>

Answer 1

这是我为感兴趣的人提供的答案。

我昨天按照 kasynych 的建议使用了 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();

});