We Keep Coding

Add value from textbox to counter

I'm learning javascript and I want to create a simple clock. I want for user to be able to change minutes by entering a number in textbox and pressing a button, so when that number is displayed and when the seconds are counted to 60, that displayed number increase by 1, my code won't work, help pls:
var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
return seconds = 0;
}
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
dugme.addEventListener("click", function() {
var minutes = parseInt(document.querySelector("#value").value);
el2.innerText = minutes;
})
function incrementMinutes() {
minutes2 += 1;
if (minutes2 === 60) {
return minutes2 = 0;
}
rezultat = (seconds + minutes2 + minutes);
el2.innerText = rezultat;
}
var cancel = setInterval(incrementMinutes, 60000);
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>

You have a few problems in your code. The main mistake is that your variable minutes is not defined in the function incrementMinutes() where you are trying to use it. You have to calculate it again.
Other improvements that you can make are:
Remove the return in your incrementSeconds and incrementMinutes function
Have only 1 setInterval, and call incrementMinutes when seconds reach 60.
You can see a snippet here below:
var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
seconds = 0;
incrementMinutes();
}
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
dugme.addEventListener("click", function() {
var minutes = parseInt(document.querySelector("#value").value);
el2.innerText = minutes;
})
function incrementMinutes() {
minutes2 += 1;
if (minutes2 === 60) {
minutes2 = 0;
}
rezultat = (minutes2 + parseInt(document.querySelector("#value").value));
el2.innerText = rezultat;
}
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>

To show here the behavior I made a minute to 5 seconds.
As a formatting improvement, if you want to show in result min:sec you can do this
min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;
To build the string with leading zeros.
I have removed the returns because they were not neccessary you can inside reset the value there is no need to return it.
var seconds = 0;
var min = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var secCounter = document.getElementById("seconds-counter");
var mintCounter = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
seconds = 0;
}
secCounter.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
function incrementMinutes() {
min += 1;
if (min === 60) {
min = 0;
}
tempMin = min;
tempSec = seconds;
min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;
rezultat = (min+":"+seconds);
mintCounter.innerText = rezultat;
min = tempMin;
seconds = tempSec;
}
// for debugging to 5 sec
var cancel = setInterval(incrementMinutes, 5000);
dugme.addEventListener("click", function() {
var inpMinutes = parseInt(document.querySelector("#value").value);
min = inpMinutes;
mintCounter.innerText = min;
})
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>

javascript dosen't read the value in html

So i want to make a program that start countingdown from a value that you choose but the issue is when i try to bring the value to javascript it dosen't work but when i type the value in html it work
here is my html code
<body>
<div id="count">
<input id="time" type="number" min="0">
<button id="button">Press here to begin the countdown</button>
</div>
<script src="lol.js"></script>
and here is my javascript code
var count = document.getElementById("count"),
seconds = document.getElementById("time").value ,
btn = document.getElementById("button"),
secondPass;
countDown = setInterval(function() {
secondPass()
} , 1000);
btn.onclick =
function secondPass(){
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10){
remseconds = "0" + remseconds;
}
if (seconds> 0 ){
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}

The problem in your code was that you were trying to get the value before it was entered.
If I understood correctly, you wanted this:
var count = document.getElementById("count"),
btn = document.getElementById("button"),
secondPass;
btn.addEventListener("click", secondPass);
function secondPass() {
var seconds = document.getElementById("time").value
var countDown = setInterval(function () {
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
if (seconds > 0) {
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}, 1000);
}
<div id="count">
<input id="time" type="number" min="0">
<button id="button">Press here to begin the countdown</button>
</div>

Main mistake - on time when you declare seconds variable - time input is empty.
I fixed your example, so you can figure out what was wrong
var count = document.getElementById("count"),
seconds,
btn = document.getElementById("button"),
countDown
btn.onclick = function() {
seconds = document.getElementById("time").value;
countDown = setInterval(function() {
secondPass()
}, 1000);
}
function secondPass(){
console.log('S', seconds)
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10){
remseconds = "0" + remseconds;
}
if (seconds> 0 ){
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}

Countdown timer stops ticking when the phone screen is locked

I wrote a code - a timer that measures the number of seconds entered. While the timer counts down the seconds when I lock the phone screen, after unlocking the screen after a long time, the timer stopped a few seconds after locking the screen. Is there any way to fix this?
document.getElementById('btn').addEventListener('click',function(){
var workSeconds = parseInt(document.getElementById('work-seconds').value);
var workSecondsCount = workSeconds;
var worktimer = setInterval(workSecCount,1000);
function workSecCount(){
workSecondsCount--;
workSecondsCount < 10 ? document.getElementById('workSecs').textContent = "0" + workSecondsCount : document.getElementById('workSecs').textContent = workSecondsCount;
if(workSecondsCount == 0){
document.getElementById('workSecs').textContent = "DONE";
workSecondsCount = workSeconds;
clearInterval(worktimer);
}
};
});
<input type="number" id="work-seconds" placeholder="seconds" min="0">
<button id="btn">START</button>
<p>Work Timer : <span id="workSecs"></span></p>

instead of workSecondsCount you need to rely on current time, then you can compensate time gaps.
var worktimer = 0;
document.getElementById('btn').addEventListener('click',function(){
if (!worktimer) clearInterval(worktimer);
var workSeconds = parseInt(document.getElementById('work-seconds').value);
var workSecondsCount = new Date().getTime() + workSeconds * 1000;
function workSecCount(){
const secondsCount = Math.ceil((workSecondsCount - new Date().getTime()) / 1000);
secondsCount < 10 ? document.getElementById('workSecs').textContent = "0" + secondsCount : document.getElementById('workSecs').textContent = secondsCount;
if(secondsCount <= 0){
document.getElementById('workSecs').textContent = "DONE";
if (worktimer) {
clearInterval(worktimer);
worktimer = 0;
}
}
};
workSecCount();
worktimer = setInterval(workSecCount,1000);
});

frames per second issue

Hi I have created a function which converts the hours, minutes and frames per second which is ->
function toHHMMSS(seconds) {
var sec_num = parseInt(seconds);
var hours = Math.floor(sec_num / 3600);
var parshours = parseInt(hours);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var parsmin = parseInt(minutes);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
var parssec = parseInt(seconds);
if (parshours < 10) { parshours = "0" + parshours; }
if (parsmin < 10) { parsmin = "0" + parsmin; }
if (parssec < 10) { parssec = "0" + parssec; }
// calculation for frames
var vidframes = document.getElementById('video');
timeFloat = parseInt(vidframes.currentTime * 25).toPrecision(4) / 60;
if (timeFloat > 25) {
timeFloat = 0;
}
frametestout = timeFloatOut - timeFloat;
frames = frametestout * frameRate;
var time = parshours + ':' + parsmin + ':' + parssec + ':' + timeFloat;
return time;
}
var timeFloat;
var timeFloatOut;
function getCurTime(e) {
var vid = document.getElementById('video');
timeFloat = parseInt(vid.currentTime);
var timeintime = document.getElementById('timein').innerHTML = toHHMMSS(timeFloat);
}
function getOutTime(e) {
var vid = document.getElementById('video');
timeFloatOut = parseInt(vid.currentTime);
var timeouttime = document.getElementById('timeOut').innerHTML = toHHMMSS(timeFloatOut);
var framecount = document.getElementById('frameCount').innerHTML = frames;
}
$("#btnTime").kendoButton({
click: getCurTime
});
$("#btnTimeOut").kendoButton({
click: getOutTime
});
}
The issue is I need the frames to reset after each second. rather than continuously incrementing.
Any help would be appreciated.

wouldn't that do the trick?
setTimeout(function(){
frames = 0;
},1000);

Jquery timer countdown and countup

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>

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();
});