Is there a way to exit an if statement from a setTimeout loop in JavaScript?

I am creating a percent clock that shows me how much percent I am through a certain time in the day. When I ran it, it had an output of above 100% when it was supposed to be 50% at the time. I realized the error was it wasn’t exiting the if statements, and I couldn’t figure out a way to do so. I can’t use while true statements because they don’t work with browsers, so if somebody could find a way to exit the if statement when the seconds variable gets above a certain amount I would be very grateful. Here is my code:

var clock = document.getElementById("clockHeading");


setInterval(() => {
    
    var today = new Date();
    var hours = today.getHours() * 3600;
    var minutes = today.getMinutes() * 60;
    var seconds = today.getSeconds() + minutes + hours;
    seconds = seconds - 31800;
    if (seconds >= 0 && seconds <= 4140) {
        setInterval(() => {
            var percentage = seconds / 4140;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 4200 && seconds <= 7380) {
        setInterval(() => {
            var percentage = seconds / 3240;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 8640 && seconds <= 11700) {
        setInterval (() => {
            var percentage = seconds / 3060;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 11760 && seconds <= 14700) {
        setInterval (() => {
            var percentage = seconds / 2940;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 17520 && seconds <= 20700) {
        setInterval (() => {
            var percentage = seconds / 3180;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 20760 && seconds <= 24000) {
        setInterval (() => {
            var percentage = seconds / 3240;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
}, 1000)

body{
    font-family: 'Josefin Sans', sans-serif;
}
#clockHeading{
    position: absolute;
    top: 38%;
    bottom: 0%;
    width: 100%;
    text-align: center;
    font-size: 200px;
}
* {
    margin: 0;
    padding: 0;
}
.animation-area {
    background: linear-gradient(to left, #8942a8, #ba382f);
    width: 100%;
    height: 100vh;
}
.box-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.box-area li {
    position: absolute;
    display: block;
    list-style: none;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 20s linear infinite;
    bottom: -150px;
}
.box-area li:nth-child(1) {
    left: 86%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.box-area li:nth-child(2) {
    left: 12%;
    width: 30px;
    height: 30px;
    animation-delay: 1.5s;
    animation-duration: 10s;
}
.box-area li:nth-child(3) {
    left: 70%;
    width: 100px;
    height: 100px;
    animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
    left: 42%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 15s;
}
.box-area li:nth-child(5) {
    left: 65%;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}
.box-area li:nth-child(6) {
    left: 15%;
    width: 110px;
    height: 110px;
    animation-delay: 3.5s;
}
@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-800px) rotate(360deg);
        opacity: 0;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Percent Clock</title>
        <link href="style.css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,300&display=swap" rel="stylesheet">
    </head>
    <body>
        <h1 id="clockHeading"></h1>
        <script type="text/javascript" src="clock.js"></script>
            <div class="animation-area">
                <ul class="box-area">
                     <li></li>
                     <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
           </div>
    </body>
</html>

Answer

You need to clearInterval() every time you want to “exit” the loop. You also need to store the interval variable somewhere to be able to clear it:

See my // comments for the changes I made:

var interval = setInterval(() => { // Store it in a variable
    
    var today = new Date();
    var hours = today.getHours() * 3600;
    var minutes = today.getMinutes() * 60;
    var seconds = today.getSeconds() + minutes + hours;
    seconds = seconds - 31800;
    if (seconds >= 0 && seconds <= 4140) {
        clearInterval( interval ); // Clear the old one

        interval = setInterval(() => { // Store the new one
            var percentage = seconds / 4140;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 4200 && seconds <= 7380) {
        clearInterval( interval ); // Clear the old one

        interval = setInterval(() => {
            var percentage = seconds / 3240;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 8640 && seconds <= 11700) {
        clearInterval( interval ); // Clear the old one

        interval = setInterval (() => { // Store the new one
            var percentage = seconds / 3060;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 11760 && seconds <= 14700) {
        clearInterval( interval ); // Clear the old one

        interval = setInterval (() => { // Store the new one
            var percentage = seconds / 2940;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 17520 && seconds <= 20700) {
        clearInterval( interval ); // Clear the old one

        interval = setInterval (() => { // Store the new one
            var percentage = seconds / 3180;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
    if (seconds >= 20760 && seconds <= 24000) {
        clearInterval( interval ); // Clear the old one

        interval = setInterval (() => { // Store the new one
            var percentage = seconds / 3240;
            percentage = percentage * 100;
            percentage = percentage.toFixed(1);
            percentage = String(percentage) + '%';

            clock.innerHTML = percentage;
        }, 1000)
    }
}, 1000)