jquery定时器倒计时和countup

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

这是我想出的答案，对于任何感兴趣的人。

我用jquery-runner作为kasynych昨天的建议。 github.com/jylauril/jquery-runner。 HTTPS：// github上

答案可以在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(); 

});