Javacript：不断变化的字符

Question

我有一个<p>标签

<p id="rev">|</p>

我想通过Javascript不断进行更改，以创建一个老式的加载动画，该动画将重复这种模式：

| / - \

[我不熟悉Javascript如何处理递归，但是下面的代码块仅创建了一个较长的加载周期，并且无法按预期运行：

function runRev() {
    document.getElementById('rev').innerHTML = "/";
    setTimeout(function(){}, 2000);
    document.getElementById('rev').innerHTML = "-";
    setTimeout(function(){}, 2000);
    document.getElementById('rev').innerHTML = "\\";
    setTimeout(function(){}, 2000);
    document.getElementById('rev').innerHTML = "|";
    setTimeout(function(){}, 2000);
    runRev();
}
runRev();

我想有一种更好的方法可以完成此任务。如何创建可以连续运行以更改单个字符的Javascript函数？

Answer 1

您可以使用css动画执行此操作。

  .rotate {
            animation: rotation 2s infinite linear;
            width: 10px;
            height: 10px;
        }
        
        @keyframes rotation {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(359deg);
            }
        }

<p class="rotate">|</p>