如何使用 document.write 更改文本并删除过去的文本

Question

我想为网站制作一个加载动画，我认为这些 Unicode 字符看起来不错：☰ ☱ ☲ ☴ 但我不知道该怎么做。

Answer 1

你可以用这样的方法来做到这一点：

var animationContainer = document.querySelector('#animation');

var animationThing = 0;

setInterval(function() {

  switch (animationThing) {

    case 0:

        animationContainer.innerHTML = '☰';

        animationThing++;

        break;

        

    case 1:

        animationContainer.innerHTML = '☱';

        animationThing++;

        break;

        

    case 2:

        animationContainer.innerHTML = '☲';

        animationThing++;

        break;

        

    case 3:

        animationContainer.innerHTML = '☴';

        animationThing = 0;

        break;

   }

}, 200);

<span id="animation"></span>

Answer 2

有多种方法可以设置元素的内容。setTimeout这只是使用或 来setInterval在暂停后继续更改内容的情况。

例如：

const chars = ['☰','☱', '☲', '☴'];

const el = document.getElementById('spinner');

let index = 0;

function changeChar() {

  el.innerText = chars[index];

  index = (index + 1) % chars.length;

  setTimeout(changeChar, 200);

}

changeChar()

<div id="spinner" />