时间戳

首页 > 解决方案 > 如何每隔几秒钟更改一次innerHTML

javascript - 如何每隔几秒钟更改一次innerHTML

问题描述

我正在学习 Javascript，我想在我的网页上循环遍历文本。我用 CSS 完成了这项工作，但 Safari 浏览器不支持它，所以我想我会采取不同的方法并使用 Javascript。我希望文本每 2 秒循环一次我拥有的 3 个字符串，并无限期地循环。每当我尝试使用 while 循环时，页面就永远不会加载。

    const title = document.getElementById('job-title');
    let loop = true;
    while (loop = true) {
        title.innerHTML = "Web Developer";
        setTimeout(function(){ title.innerHTML = "Web Designer" }, 2000);
        setTimeout(function(){ title.innerHTML = "Graphic Designer" }, 4000);
        ; 
    }
  } ```

标签： javascript

解决方案

你需要的只是一个计时器——也就是说setInterval

let titles = ['Web Developer', 'Web Designer', 'Graphic Designer'];
let currentIndex = 0;
let aSpan = document.getElementById('job-title');

setInterval(() => {
   
   aSpan.innerHTML= titles[currentIndex];   
   
   currentIndex++;
   
   if (currentIndex === 3)
    currentIndex = 0;

}, 1000)
<span id="job-title"></span>

推荐阅读