javascript - 我该如何修复 JS 以使文本不会被删除并继续累积？

Question

我喜欢这段代码在我的网站上创建“打字效果”的想法，但是我不知道如何很好地编辑 JS。我希望输入的文本不会被删除。我还希望光标在最后保持闪烁。

我已经根据自己的喜好修复了一些 CSS，但我提供了它以防需要完成效果。

/***Javascript****/
<
script type = "text/javascript" >
    // function([string1, string2],target id,[color1,color2])
    consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);

function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    target.setAttribute('style', 'color:' + colors[0])
    window.setInterval(function() {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            target.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function() {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                words.push(usedWord);
                x = 1;
                target.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function() {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (waiting === false) {
            target.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function() {
        if (visible === true) {
            con.className = 'console-underscore hidden'
            visible = false;

        } else {
            con.className = 'console-underscore'

            visible = true;
        }
    }, 400)
} <
/script>

@import url(https://fonts.googleapis.com/css?family=Khula:700); 

.hidden {
 opacity:0;
}
.console-container {
 font-family:Khula;
 font-size:4em;
 text-align:center;
 height:30px;
 width:600px;
 display:inline;
 position:relative;
 color:black;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;
}
.console-underscore {
 display:inline-block;
 position:relative;
 left:10px;
}

@media (max-width: 750px) {
  .console-container {  font-size:2em; }
}

<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>

上面是预期结果，当前结果可以在这里看到:https://divinotes.com/typing-text-effect-using-divi-code-modules/

Answer 1

我不知道我是否理解你的想法……但你可以改变女巫删除文本的大小写。

else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function() {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 1000)
}

第二个问题是它一次只渲染一个单词...如果你想在同一时刻有更多不同颜色的单词，你不应该写入目标元素的 innerHTML...而是创建 child该标签的元素并仅更改事件的元素....

<script type = "text/javascript" >
    // function([string1, string2],target id,[color1,color2])
    consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);

function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    var textElement = document.createElement('span'); //a variable to store the active one
    target.appendChild(textElement); // we append the textElement to the target
    textElement.setAttribute('style', 'color:' + colors[0]) //instead of modifying target we modify textElement
    window.setInterval(function() {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            textElement.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function() {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                // You can remove the repeating by uncommenting the following line
                words.push(usedWord);
                x = 1;
                textElement.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) { // erase case
            waiting = true;
            window.setTimeout(function() {
                letterCount = 0; // start with a new word
                textElement.innerHTML += " "; // apend a space to the old one to get seperation
                textElement = document.createElement('span'); // create a new textElement for the next word
                target.appendChild(textElement); // and append the new element to the target
                waiting = false;
            }, 1000)
        } else if (waiting === false) {
            textElement.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function() {
        if (visible === true) {
            con.className = 'console-underscore hidden'
            visible = false;

        } else {
            con.className = 'console-underscore'

            visible = true;
        }
    }, 400)
} </script>

您可以通过取消注释以下行来删除重复words.push(usedWord); 此行将事件词添加回词队列。