Assignment 3 Task 1
user_1373341
html
10 months ago
1.9 kB
1
Indexable
Never
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Animation</title> </head> <body> Initial number: <input type="text" id="inNum"> <br/> <br/> Increase by: <input type="text" id="increaseBy"> <br/> <br/> Time interval (every): <input type="text" id="timeInterval"> (ms) <br/> <br/> <button onclick="initial(); startAnime()">Start</button> <button onclick="stopAnime()">Stop</button> <br/> <br/> <span id="display" style="font-size: 50px;"></span> <script type="text/javascript"> var inNum = document.getElementById("inNum"); var increaseBy = document.getElementById("increaseBy"); var timeInterval = document.getElementById("timeInterval"); var display = document.getElementById("display"); var colorList = ["yellow", "pink", "orange", "blue"]; var anime; var counter; let flag = false; function startAnime() { if (flag) return; anime = setInterval(numCounter, timeInterval.value); console.log("Time interval -> " + timeInterval.value); flag = true; } function stopAnime() { flag = false; clearInterval(anime); console.log("Stopped"); inNum.value = ""; increaseBy.value = ""; timeInterval.value = ""; } function initial() { display.innerText = ""; display.style.color = "green"; counter = parseInt(inNum.value); display.innerText = counter; console.log("Current value -> " + counter); if (!flag) return; } function numCounter() { counter += parseInt(increaseBy.value); display.innerText = counter; console.log("Updated value -> " + counter); var index = Math.floor(Math.random() * colorList.length); console.log("Index -> " + index); console.log("Color -> " + colorList[index]); display.style.color = colorList[index]; } </script> </body> </html>