js中的连续彩虹颜色循环效果

Question

刚开始学习JS，想知道如何使用JS创建一个VIBGYOR颜色不断循环的效果。这是我的尝试https://jsfiddle.net/2t1kbm8u/。

const scheme = document.querySelector("div");
const rainbow = [
"#9400D3",
"#4B0082",
"#0000FF",
"#00FF00",
"#FFFF00",
"#FF7F00",
"#FF0000",
];
setInterval(() => {
for(let colors = 0; colors < rainbow.length; colors++) {
scheme.style.color = `${rainbow[colors]}`;
scheme.style.borderColor = `${rainbow[colors]}`;
console.log(rainbow[colors]);
}
}, 1000);

虽然所有颜色都被安慰，但只有第一个和最后一个颜色是可见的

Answer 1

const scheme = document.querySelector("div");
const rainbow = [
"#9400D3",
"#4B0082",
"#0000FF",
"#00FF00",
"#FFFF00",
"#FF7F00",
"#FF0000",
];
var currentColor = 0;
setInterval(() => {
scheme.style.color = `${rainbow[currentColor]}`;
scheme.style.borderColor = `${rainbow[currentColor]}`;
currentColor++; 
if (currentColor == rainbow.length-1) {
currentColor = 0;
}
}, 1000);