javascript - 改变字母颜色的循环

Question

目的是将#text中的所有字符一个一个变色，我做了一个循环:

function myFunction() {
        var letters = document.getElementById('text');
        for (var i = 0; i < letters.innerHTML.length; i++) {
            //only change the one you want to
                letters.innerHTML = letters.innerHTML.replace(letters[i], '<span style="color: yellow;">'+letters[i]+'</span>');
           }
    }

它不工作，但也没有显示任何错误。

https://jsfiddle.net/zkbctk2h/

Answer 1

我建议用 id = "text" 存储元素的文本，并从旧文本构建一个新字符串，因为 replace 会替换第一个找到的字符，而这可能不是想要的字符, 因为被替换的字符 cold 包含不应被替换的字符。

function myFunction() {
    var letters = document.getElementById('text'),
        text = letters.innerHTML
      
    letters.innerHTML = '';    
    for (var i = 0; i < text.length; i++) {
        letters.innerHTML += '<span style="background-color: yellow;">' + text[i] + '</span>';
    }
}

myFunction();

<div id="text">abracadabra</div>

setInterval 的一些打字机功能和 clearInterval

function myFunction() {
    var letters = document.getElementById('text'),
        text = letters.innerHTML,
        i = 0;
      
    return function () {
        var j;
        if (i < text.length) {
            letters.innerHTML = '';
            for (j = 0; j <= i; j++) {
                letters.innerHTML += '<span style="background-color: yellow;">' + text[j] + '</span>';
            }
            letters.innerHTML += text.slice(j);
            i++;
        } else {
            clearInterval(interval);
        }
    }
}

var interval = setInterval(myFunction(), 500);

<div id="text">abracadabra</div>