How can I change my display so instead of calculating seconds it calculates the minutes because when I tried to do the remminuts it did not work and im not quite sure where i am going wrong.
Here is the code for the javascript:
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit(){
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e){
document.getElementById(e).style.display = 'block';
}
function remove(e){
document.getElementById(e).style.display = 'none';
}
function check(stat){
if(stat.id == "start"){
display("stop");
remove("start");
toCount = true;
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
toCount = false
}
else{
display("stop");
remove("continue");
toCount =true;
}
}
function count(){
if(seconds > 0){
if(toCount == true){
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(minuts < 10){
minuts = "0" + minuts;
}
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
}
else{
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting(){
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
As you can see it's calculating for the seconds, but when I tried minutes instead, I got no results from it so i am very stuck on what i might be doing wrong.
If you don't really care about accuracy you can use a function like this:
const secs = x => Math.round(x/60)
This however calculates 0 (mins) when you enter 29 (seconds). If you don't like that search for a more sophisticated solution online.
Related
I'm building a memory card game.
I want to show the time from the moment the user pressed on the first card till they win.
i dont understand how to make the stopwatch to continue counting while the player plays without it getting stuck or not refreshing the display enough.
HTML:
<h4 class="stopwatch">00:00:00</h4>
JavaScript:
while (TOTAL_COUPLES_COUNT !== flippedCouplesCount) {
sec++;
if (sec == 60) {
min = min + 1;
sec = 0;
}
if (min == 60) {
hr = hr + 1;
min = 0;
sec = 0;
}
elStopwatch.innerHTML = hr + ":" + min + ":" + sec;
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
<label id="minutes">00</label>:<label id="seconds">00</label>
The button I am listening in on and span element I want to
increment my timer in.
<p class="text2">art</p><br />
<p class="clocktext">
<span id="artSession">
<?php displayTime("art"); ?>
</span>
</p><br />
<button id="artBtn"> record </button><br />
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jsfunctions.js"></script>
Here is my js functions file im calling from
// Beginning of tracker functionality
// variables to begin with
var interval;
var hours = 0;
var minutes = 0;
var seconds = 0;
var displayHrs = 0;
var displayMins = 0;
var displaySecs = 0;
var end, start, totalTime;
var timerStatus = false;
function sessionTimer() {
seconds = seconds + 1;
if(seconds >= 60 ) {
minutes++;
seconds = 0;
} else if ( minutes >= 60 ) {
hours++;
minutes = 0;
}
// logic to add leading 0
if( seconds < 10 ) {
displaySecs = '0' + seconds;
} else {
displaySecs = seconds;
} if( minutes < 10 ) {
displayMins = '0' + minutes;
} else {
displayMins = minutes;
} if( hours < 10 ) {
displayHrs = '0' + hours;
} else {
displayHrs = hours;
}
recordTime = displayHrs + ':' + displayMins + ':' + displaySecs;
document.getElementById('artSession').innerHTML = recordTime;
} // end of custom timer function
function buttonListening(catBtnId, catBtn, catSession, catSessionId, catagory) {
$(catBtnId).click(function() {
if(timerStatus == false) {
interval = setInterval(sessionTimer(), 1000);
document.getElementById(catBtn).innerHTML = 'stop';
timerStatus = true;
start = new Date();
}
else if (timerStatus == true) {
clearInterval(interval);
document.getElementById(catBtn).innerHTML = 'record';
end = new Date();
totalTime = end.getTime() - start.getTime();
timerStatus = false;
// reset timer values
hours = 0;
minutes = 0;
seconds = 0;
displayHrs = 0;
displayMins = 0;
displaySecs = 0;
// logic to add leading 0
if( seconds < 10 ) {
displaySecs = '0' + seconds;
} else {
displaySecs = seconds;
} if( minutes < 10 ){
displayMins = '0' + minutes;
} else {
displayMins = minutes;
} if( hours < 10 ){
displayHrs = '0' + hours;
} else {
displayHrs = hours;
}
//display formatted time in div
recordTime = displayHrs + ':' + displayMins + ':' + displaySecs;
document.getElementById(catSession).innerHTML = recordTime;
//#sign required !!include full path
$(catSessionId).load( 'includes/submit_time.php', {
postTimeCat: catagory ,
postTotalTime: totalTime
});
}
});
} // end of custom function storing btn event ---------------------------------------
buttonListening("#artBtn","artBtn","artSession","#artSession","art");
}); // end of js
Not quite sure where I'm going wrong. It was all working earlier today... GAHHH this project forsure has empowered me to start using github. Hope one of you guys can help me :C spent like all day smashing face off keyboard to get this thing to work. pet project almost done!
timeInterval = setInterval(sessionTimer(), 1000);
don't need parentheses '()' when passing function name in setInterval()
timeInterval = setInterval(sessionTimer, 1000);
hope this saves someone 4hrs
Hi there I have a stopwatch embedded in my website, however I have a problem. When the seconds reach 60 therefore 1 minute they should reset to 00. However in this case while the minute will increase every 60 seconds the seconds will not reset to zero. Here is my code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Any help much appreciated
You can use that code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if(secs >= 60)
{
secs = secs - ( mins * 60 );
}
if ((secs).toString().length === 1) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if ((tenths).toString().length === 1) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Just include a modulo by 60 to line number 36 to properly reset seconds to 0 (line commented to highlight):
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10) % 60; // <-- see here for change
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
I'm working on a pomodoro clock and functionality is almost done, except I'm having difficulty implementing breakTime countdown without rewriting countDown() function just for breakTime. I got the impression I can reuse countDown function for break time. I just don't know how. If someone could give me some clues / code? thanks Project https://codepen.io/zentech/pen/vJGdjN
Javascript
$(document).ready(function() {
//variables
var workTime = $(".work").text(); //working time
var breakTime = $(".break").text(); //break time
var seconds = 00;
var minutes = workTime; //setting clock = to workTime
var clockDisplay = document.getElementById("display");
var counterId = 0;
var state = "on";
//start / stop listener functionality
$("#start").click(function() {
var value = $(".button").text();
console.log(value);
if(value == "Start") {
state = "on";
console.log("started!");
//starting counter
counterId = setInterval(countDown, 1000);
$("#session").text("Working");
$(".button").text("Stop");
}
else {
console.log("stopped");
state = "off";
minutes = workTime;
seconds = 0;
//clear counter
clearInterval(counterId);
clockDisplay.innerHTML = workTime +":00";
$(".button").text("Start");
}
});
//add work time
$('.plusWork').click(function() {
workTime++;
minutes = workTime;
$('.work').text(workTime);
clockDisplay.innerHTML = workTime +":00";
console.log(workTime);
});
//substract work time
$('.minWork').click(function() {
workTime--;
minutes = workTime;
$('.work').text(workTime);
clockDisplay.innerHTML = workTime +":00";
console.log(workTime);
});
//add break time
$('.plusBreak').click(function() {
breakTime++;
minutes = breakTime;
$('.break').text(breakTime);
console.log(breakTime);
});
//substract break time
$('.minBreak').click(function() {
breakTime--;
minutes = breakTime;
$('.break').text(breakTime);
console.log(breakTime);
});
//work countdown timer function
function countDown() {
//if workTime = 0 reset counter and stop
if(minutes == 0 && seconds == 0 && state == "on") {
clearTimeout(counterId);
//if work countdown reach 0, start break
minutes = breakTime;
seconds = 00;
setInterval(countDown, 1000);
return;
}
else if(minutes == 0 && seconds > 0) {
seconds--;
if(seconds < 10) seconds = "0"+seconds;
clockDisplay.innerHTML = minutes + ":" + seconds;
console.log(minutes +":"+seconds +" 2");
}
//when seconds < 0 substract a minute
else if(minutes > 0 && seconds < 0) {
minutes--;
seconds = 59;
clockDisplay.innerHTML = minutes + ":" + seconds;
console.log(minutes +":"+seconds +" 3");
}
else {
//if second single digit add 0
if (seconds < 10) seconds = "0"+seconds;
clockDisplay.innerHTML = minutes +":"+ seconds;
seconds--;
console.log(minutes +":"+seconds +" 4");
}
}
});
I'm creating a countdown timer. If seconds is equal to zero I have set 2 secs to var seconds. Please help. I need to stop the program from looping after getting the 2 seconds
var isWaiting = false;
var isRunning = false;
var seconds = 10;
function GameTimer(){
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if(remainingSeconds < 10){
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('waiting_time').innerHTML = minutes + ":" + remainingSeconds;
if(seconds == 0){
isRunning = true;
seconds += 2; //I need to stop the program from looping after getting the 2 seconds
}else{
isWaiting = true;
seconds--;
}
}
var countdownTimer = setInterval(GameTimer(),1000);
Here is your fixed code:
var isWaiting = false;
var isRunning = false;
var seconds = 10;
var countdownTimer;
var finalCountdown = false;
function GameTimer() {
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('waiting_time').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
isRunning = true;
seconds += 2;
if (finalCountdown) {
clearInterval(countdownTimer); // Clear the interval to stop the loop
} else {
finalCountdown = true; // This will allow the 2 additional seconds only once.
}
} else {
isWaiting = true;
seconds--;
}
}
countdownTimer = setInterval(GameTimer, 1000); // Pass function reference, don't invoke it.
WORKING DEMO: http://jsfiddle.net/nEjL4/1/
since i couldn't understand the code that's up in the question i wrote down my own timer. So take a look if it works out for you.
http://jsfiddle.net/9sEGz/
var m=getId('m'), s=getId('s'), btn=getId('btn'), status=getId('status'), inc =getId('inc') , dec =getId('dec'), interval=null, time=0, min=0;
btn.onclick = startCounter;
inc.onclick = incTime;
dec.onclick = decTime;
function startCounter() {
if (time<=0) {
status.textContent='Increase the timer first!';
time=0;
return;
}
status.textContent='Counting!';
btn.textContent = 'Stop';
btn.onclick = stopCounter;
interval = setInterval(function(){
time--;
if (time<=0) {
stopCounter();
status.textContent='Time\'s Up';
}
setTime();
},200);
}
function stopCounter() {
btn.textContent = 'Start';
btn.onclick = startCounter;
status.textContent='Stopped!';
if (interval) clearInterval(interval);
}
function incTime(){
time++;
setTime();
}
function decTime(){
time--;
setTime();
}
function setTime() {
min= time/60;
if (time<10) s.textContent= '0'+Math.floor(time%60);
else s.textContent= Math.floor(time%60);
if (min<0) m.textContent= '00';
else if (min<10) m.textContent= '0'+Math.floor(min);
else m.textContent= Math.floor(min);
}
function getId(x) {
return document.getElementById(x);
}