用js旋转字体系列答案

【问题标题】：Rotating font family with js用js旋转字体系列
【发布时间】：2021-11-24 18:31:45
【问题描述】：

我对 JS 很陌生，我有一个问题我想很容易解决，但我想不通：

我想找到一种方法，每 0.1 秒更改一次 html 元素的字体系列，而无需触发任何东西。

基本上我希望 html 元素每 0.1 秒更改一次字体，在 6 个字体系列之间轮换一次。

如果你们能找到方法真的很感激。

路易

【问题讨论】：

请阅读How to Ask 和minimal reproducible example。这个问题与 SO 无关

标签： javascript css class timer setinterval

【解决方案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>

【讨论】：

欢迎来到 Stack Overflow。没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。
非常感谢您的回答！！你完全明白我想做什么，但它似乎不起作用。是语法问题吗？也许引用某处，因为 JS 有时需要它来更改 CSS？有什么可以从这里得到帮助的信息吗？

【解决方案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);
})();

&lt;div id="elementID"&gt;Some Text to test it OUT&lt;/div&gt;

【讨论】：