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:
JavaScript
x
71
71
1
var clock = document.getElementById("clockHeading");
2
3
4
setInterval(() => {
5
6
var today = new Date();
7
var hours = today.getHours() * 3600;
8
var minutes = today.getMinutes() * 60;
9
var seconds = today.getSeconds() + minutes + hours;
10
seconds = seconds - 31800;
11
if (seconds >= 0 && seconds <= 4140) {
12
setInterval(() => {
13
var percentage = seconds / 4140;
14
percentage = percentage * 100;
15
percentage = percentage.toFixed(1);
16
percentage = String(percentage) + '%';
17
18
clock.innerHTML = percentage;
19
}, 1000)
20
}
21
if (seconds >= 4200 && seconds <= 7380) {
22
setInterval(() => {
23
var percentage = seconds / 3240;
24
percentage = percentage * 100;
25
percentage = percentage.toFixed(1);
26
percentage = String(percentage) + '%';
27
28
clock.innerHTML = percentage;
29
}, 1000)
30
}
31
if (seconds >= 8640 && seconds <= 11700) {
32
setInterval (() => {
33
var percentage = seconds / 3060;
34
percentage = percentage * 100;
35
percentage = percentage.toFixed(1);
36
percentage = String(percentage) + '%';
37
38
clock.innerHTML = percentage;
39
}, 1000)
40
}
41
if (seconds >= 11760 && seconds <= 14700) {
42
setInterval (() => {
43
var percentage = seconds / 2940;
44
percentage = percentage * 100;
45
percentage = percentage.toFixed(1);
46
percentage = String(percentage) + '%';
47
48
clock.innerHTML = percentage;
49
}, 1000)
50
}
51
if (seconds >= 17520 && seconds <= 20700) {
52
setInterval (() => {
53
var percentage = seconds / 3180;
54
percentage = percentage * 100;
55
percentage = percentage.toFixed(1);
56
percentage = String(percentage) + '%';
57
58
clock.innerHTML = percentage;
59
}, 1000)
60
}
61
if (seconds >= 20760 && seconds <= 24000) {
62
setInterval (() => {
63
var percentage = seconds / 3240;
64
percentage = percentage * 100;
65
percentage = percentage.toFixed(1);
66
percentage = String(percentage) + '%';
67
68
clock.innerHTML = percentage;
69
}, 1000)
70
}
71
}, 1000)
JavaScript
1
86
86
1
body{
2
font-family: 'Josefin Sans', sans-serif;
3
}
4
#clockHeading{
5
position: absolute;
6
top: 38%;
7
bottom: 0%;
8
width: 100%;
9
text-align: center;
10
font-size: 200px;
11
}
12
* {
13
margin: 0;
14
padding: 0;
15
}
16
.animation-area {
17
background: linear-gradient(to left, #8942a8, #ba382f);
18
width: 100%;
19
height: 100vh;
20
}
21
.box-area {
22
position: absolute;
23
top: 0;
24
left: 0;
25
width: 100%;
26
height: 100%;
27
overflow: hidden;
28
}
29
.box-area li {
30
position: absolute;
31
display: block;
32
list-style: none;
33
width: 25px;
34
height: 25px;
35
background: rgba(255, 255, 255, 0.2);
36
animation: animate 20s linear infinite;
37
bottom: -150px;
38
}
39
.box-area li:nth-child(1) {
40
left: 86%;
41
width: 80px;
42
height: 80px;
43
animation-delay: 0s;
44
}
45
.box-area li:nth-child(2) {
46
left: 12%;
47
width: 30px;
48
height: 30px;
49
animation-delay: 1.5s;
50
animation-duration: 10s;
51
}
52
.box-area li:nth-child(3) {
53
left: 70%;
54
width: 100px;
55
height: 100px;
56
animation-delay: 5.5s;
57
}
58
.box-area li:nth-child(4) {
59
left: 42%;
60
width: 150px;
61
height: 150px;
62
animation-delay: 0s;
63
animation-duration: 15s;
64
}
65
.box-area li:nth-child(5) {
66
left: 65%;
67
width: 40px;
68
height: 40px;
69
animation-delay: 0s;
70
}
71
.box-area li:nth-child(6) {
72
left: 15%;
73
width: 110px;
74
height: 110px;
75
animation-delay: 3.5s;
76
}
77
@keyframes animate {
78
0% {
79
transform: translateY(0) rotate(0deg);
80
opacity: 1;
81
}
82
100% {
83
transform: translateY(-800px) rotate(360deg);
84
opacity: 0;
85
}
86
}
JavaScript
1
23
23
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>Percent Clock</title>
5
<link href="style.css" rel="stylesheet">
6
<link rel="preconnect" href="https://fonts.gstatic.com">
7
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,300&display=swap" rel="stylesheet">
8
</head>
9
<body>
10
<h1 id="clockHeading"></h1>
11
<script type="text/javascript" src="clock.js"></script>
12
<div class="animation-area">
13
<ul class="box-area">
14
<li></li>
15
<li></li>
16
<li></li>
17
<li></li>
18
<li></li>
19
<li></li>
20
</ul>
21
</div>
22
</body>
23
</html>
Advertisement
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:
JavaScript
1
81
81
1
var interval = setInterval(() => { // Store it in a variable
2
3
var today = new Date();
4
var hours = today.getHours() * 3600;
5
var minutes = today.getMinutes() * 60;
6
var seconds = today.getSeconds() + minutes + hours;
7
seconds = seconds - 31800;
8
if (seconds >= 0 && seconds <= 4140) {
9
clearInterval( interval ); // Clear the old one
10
11
interval = setInterval(() => { // Store the new one
12
var percentage = seconds / 4140;
13
percentage = percentage * 100;
14
percentage = percentage.toFixed(1);
15
percentage = String(percentage) + '%';
16
17
clock.innerHTML = percentage;
18
}, 1000)
19
}
20
if (seconds >= 4200 && seconds <= 7380) {
21
clearInterval( interval ); // Clear the old one
22
23
interval = setInterval(() => {
24
var percentage = seconds / 3240;
25
percentage = percentage * 100;
26
percentage = percentage.toFixed(1);
27
percentage = String(percentage) + '%';
28
29
clock.innerHTML = percentage;
30
}, 1000)
31
}
32
if (seconds >= 8640 && seconds <= 11700) {
33
clearInterval( interval ); // Clear the old one
34
35
interval = setInterval (() => { // Store the new one
36
var percentage = seconds / 3060;
37
percentage = percentage * 100;
38
percentage = percentage.toFixed(1);
39
percentage = String(percentage) + '%';
40
41
clock.innerHTML = percentage;
42
}, 1000)
43
}
44
if (seconds >= 11760 && seconds <= 14700) {
45
clearInterval( interval ); // Clear the old one
46
47
interval = setInterval (() => { // Store the new one
48
var percentage = seconds / 2940;
49
percentage = percentage * 100;
50
percentage = percentage.toFixed(1);
51
percentage = String(percentage) + '%';
52
53
clock.innerHTML = percentage;
54
}, 1000)
55
}
56
if (seconds >= 17520 && seconds <= 20700) {
57
clearInterval( interval ); // Clear the old one
58
59
interval = setInterval (() => { // Store the new one
60
var percentage = seconds / 3180;
61
percentage = percentage * 100;
62
percentage = percentage.toFixed(1);
63
percentage = String(percentage) + '%';
64
65
clock.innerHTML = percentage;
66
}, 1000)
67
}
68
if (seconds >= 20760 && seconds <= 24000) {
69
clearInterval( interval ); // Clear the old one
70
71
interval = setInterval (() => { // Store the new one
72
var percentage = seconds / 3240;
73
percentage = percentage * 100;
74
percentage = percentage.toFixed(1);
75
percentage = String(percentage) + '%';
76
77
clock.innerHTML = percentage;
78
}, 1000)
79
}
80
}, 1000)
81