Jquery timer countdown and countup
Question
I am trying to track down the time for a basketball game.
What I need is
A countdown timer with pause and continue. For that i use the code found at http://jchavannes.com/jquery-timer/demo
I also need to track the time every player has been in the game. Not all the players are in the game simultaneously.
Problems that i want to solve. 1) Being able to start the countdown timer dynamically from any time. I mean when the page starts the time could be different each time. 2) Being able to add or substract minutes or seconds to the timer when it is stopped. 3) Being able to count up the time of the players that are in the game. That is when they are substituted their counting time should be paused and start counting the time of the players that got in the game. 4) As you can see I create a var CustomPlayer1 = new (function() { ... } var CustomPlayer2 = new (function() { ... } I know it is not the best to create all this for all the players (possibly 24 for the two teams). How can this be created more efficiently?
That for the start. Anything else that may be needed for you to understand and possibly help me do this I will be glad to tell you.
What I have so far is the following. (it is far away for what i need)
<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 answers
solution1
2 ACCPTED 2015-11-11 16:21:42
This is the answer i came up with, for anyone interested.
I used the jquery-runner as kasynych suggested yesterday. github.com/jylauril/jquery-runner.
The answer can be found at http://jsfiddle.net/stefslam/mvx3jooz/7/
STYLE
.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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Countdown timer to Countup
JS Countup timer from existing countdown timer
Jquery Countup Timer
Javascript countdown and countup timer based on user input
Javascript change countDown timer to countUp time
Javascript/jQuery stop the countup timer
How to convert jquery countdown function to countup function?
Uneven Countup Timer Jquery Based on Time of Day
javascript/jquery - countdown timer
JQuery countdown timer with milliseconds
Related Tags