<!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>