I've created a count-up clock that I'd like some help refining if you wouldn't mind. Currently, I have two issues that are bugging (pun intended!) me.
- The counter doesn't count up the hours, when it reaches two hours, it goes back to 01:01:01
- The numbers jump around
Here is my code so far…
// Counter
if (!!document.getElementById("counter")) {
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = Number(secondsLabel.textContent);
var totalMinutes = Number(minutesLabel.textContent);
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalMinutes + totalSeconds / 60));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
}
// End Counter
#counter {
background-color: #ee1a25; // TODO: Change this to a pattern
color: $white;
text-align: center;
.counter_wrapper {
flex-direction: column;
@include desktop {
flex-direction: row;
}
}
.counter_container {
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
.counter_number {
font-weight: regular;
font-size: 60px;
font-family: $family-primary;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
@include widescreen {
font-size: 133px;
}
}
.divider {
display: inline-block;
margin: 0 16px;
width: 8px;
height: 30px;
@include widescreen {
margin: 0 34px;
width: 16px;
height: 60px;
}
}
}
}
I'd apprecitate any help and advice offered please
Top comments (5)
Consider using
String.prototype.padStart
: developer.mozilla.org/en-US/docs/W....You don't currently do anything with hours in the JavaScript, so that's why it's not changing. You're only setting the minutes and seconds. You'll need to get a reference to the hours label like you did with minutes and seconds and then set it to be
parseInt(totalSeconds / 3600)
.Why do this?
if (!!document.getElementById("counter")
. Just do this:if (document.getElementById("counter"))
. Applying the negation operator twice is the same thing as not applying it at all.Regarding this concern:
What do you mean? It may be helpful to include a link to a jsfiddle with all of your HTML, CSS, and JS so we can run it on our end.
One final thing to note: You don't need
totalMinutes
. Given a number of seconds, the number of minutes it represents is equal toparseInt(totalSeconds / 60) % 60
. Since you're tallying the seconds, you don't need to also tally the minutes.Improved code: jsfiddle.net/41o7tz3n/6/.
This is fantastic, thank you. As for the numbers jumping around, I posted a gif at the top of the post. It is hopefully attached below, although this isn't that important.
One important thing though (customer request), I need the numbers to start from 01:34:06. Using your method, how would you set the starting numbers?
Just in the HTML, if it's a fixed start. Otherwise you can just use JS to allow users to enter a start time.
Yeah, that is exactly what I have done. Page loads with 01:32:20 and then changes the timer to 00:00:20.
I'll keep working at it, the help is much appreciated, thank you
Here is what I worked out; I never actually used the hours or minutes values in the HTML to start with. I was only using the seconds, calculating all the labels with that. The
totalSeconds
variable should account for the hours and minutes.So here is the code I ended up with…