使用js旋转字体族

Question

我是JS的新手，我有一个问题，可以很容易地解决我认为，但我不能弄清楚:

我想找到一种方法来改变一个html元素的字体族每0.1秒，而不必触发的东西。

基本上，我希望html元素每0.1秒改变一次字体，在6个字体族之间旋转。

如果你们能想出办法，我真的很感激。

路易斯

Answer 1

试试这样写:

function changefontFamily() {
var doc = document.getElementById("elementID");
var font= ["Arial", "Verdana", "Helvetica ", "Tahoma"];
doc.style.fontFamily= font[i];
i = (i + 1) % font.length;
}
setInterval(changefontFamily, 100);
<div id="elementID">text</div>

Answer 2

为了清晰，我设置了1秒(1000毫秒)，因为100毫秒太快了🙂

(async()=>{
const elem = document.getElementById('elementID');
const fonts = ['Arial', 'Tahoma', 'Verdana'];
let k = fonts.length;
setInterval(()=>{
k--;
elem.style.fontFamily = fonts[k];
console.log('Now:', fonts[k], k);
if(k === 0)k = fonts.length;
}, 1000);
})();

<div id="elementID">Some Text to test it OUT</div>