I create time using toLocaleString() and then I use this code to change the color every sec but it work only last color not for all.
var time=document.getElementById("time");
setInterval(function() {
var da=new Date();
var ti=da.toLocaleTimeString();
// console.log("yes");
time.innerHTML=ti;
}, 1000);
setInterval(function() {
var arr=["red","blue","green"];
var i=Math.floor(Math.random() * 2) + 1;
// console.log(i);
time.style.color=time.classList.add(arr[i]);
console.log(i);
}, 1000);
You can try this trick to achieve the requirement you have.
To get the colors in sequence, try this :
var time=document.getElementById("time");
var arr=["red","blue","green"];
let index = 0;
setInterval(function() {
var da = new Date();
var ti = da.toLocaleTimeString();
time.innerHTML = ti;
time.style.color = arr[index];
if (index < arr.length) { index++; } else { index = 0 }
}, 1000);<div id="time"></div>To get the random color from an array, try this :
var time=document.getElementById("time");
var arr=["red","blue","green"];
setInterval(function() {
var da = new Date();
var ti = da.toLocaleTimeString();
time.innerHTML = ti;
const index = Math.floor(Math.random() * arr.length);
time.style.color = arr[index];
}, 1000);<div id="time"></div>