0

Hi I want my timer to continue from the current time each second. Keeping the same time format. I just added a simple code to check.

Code

<div id="output"></div>
<script>
    const output = document.querySelector("#output");
    let time = "12:48:39"
    let seconds = 0;

    function timer() {
        seconds++;
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
            hours = `0${hours}`;
        }
        if (minutes < 10) {
            minutes = `0${minutes}`;
        }
        if (secs < 10) {
            secs = `0${secs}`;
        }
        return `${hours}:${minutes}:${secs}`;
    }
    setInterval(() => {
        output.innerHTML = parseInt(time + timer())
    }, 1000)
</script>
NoName84
  • 407
  • 3
  • 12
  • 25

2 Answers2

2

Here is the working solution.

You had to split your string that represents time, so you can count the amount of seconds that you actually had.

Note: I've used this as help for transitioning from HH:MM:SS to numbers.

And, in the end, you just need to get the timer() string, there is no need to write both time and the return element of timer function.

<div id="output"></div>
<script>
    const output = document.querySelector("#output");
    let time = "12:48:39"
    let a = time.split(':');
    let seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); ;
    let ti = "";
    function timer() {
        seconds++;
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);
        
        if (hours < 10) {
            hours = `0${hours}`;
        }
        if (minutes < 10) {
            minutes = `0${minutes}`;
        }
        if (secs < 10) {
            secs = `0${secs}`;
        }
        ti = `${hours}:${minutes}:${secs}`;
        return ti;
    }
    setInterval(() => {
        output.innerHTML = timer();
    }, 1000)
</script>
aca
  • 1,071
  • 5
  • 15
1

I'm not really sure what you're asking here... why the code isn't working?

Explanation:

First of all I'm pretty sure at least part of the issue is the fact that time and the output of timer() are both strings which you are concatenating together and then attempting to parse as numbers.

When you do time + timer() it's the same as doing "12:48:39" + timer() and for example if the output of timer is 0:01:12 (seconds = 72) then that's the same as doing:

"12:48:39" + "0:01:12"

Which will just output "12:48:390:01:12" because it will concatenate the two strings.

When you then pass that into parseInt(), you are essentially doing:

parseInt("12:48:390:01:12")

parseInt() won't know what to do with that since it's not simple number so it will just parse the beginning and throw away the rest; it will return 12, the first number.

Solution:

So... if your goal is to add two times I recommend using Date which allows you to store dates and times properly. See: Add two dates times together in javascript

Hope this helps :)

davidnagli
  • 659
  • 1
  • 6
  • 12