Question

我在Codepen上发现了这种打字效果，效果很好，但是，我试图停止循环，所以打字效果只加载一次，不再加载。我试图问作者但没有答案。你能为我指出正确的方向吗？这是原始https://codepen.io/Tbgse/pen/dYaJyJ

的链接

// 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)
}

Answer 1

您实际上需要注释掉一行代码：

// 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);   <--- This one right here!
        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) 
}

一般力学：

var usedWord = words.shift();
words.push(usedWord);

获取下一个要说的单词，然后将其添加到数组的末尾。假设这是跟踪单词的方法，要在最后停止它，只需删除push

var usedWord = words.shift();
//words.push(usedWord);

正如@mark_m所说，您还应该停止setInterval：

// 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])
  var interval = 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);   <--- This one right here!
        if(words.length==0) clearInterval(interval)
        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) 
}

P.S。我意识到这是您的第一篇文章，但这不是编码服务。向我们展示您如何解决此问题。否则，您不太可能获得真正的回应。

Answer 2

我不确定您是否需要在末尾闪烁下划线，所以我就把它留在那里了。

需要以下更改

注释掉圆形插入数组中的内容。

    var usedColor = colors.shift();
    //colors.push(usedColor);
    var usedWord = words.shift();
    //words.push(usedWord);

数组末尾的停止时间

  var wordsInterval = window.setInterval(function() {
    if(words.length == 0) {
        window.clearInterval(wordsInterval);
        return;
    }

这是完整的代码（有效链接https://codepen.io/anon/pen/LrqmPg）

    // function([string1, string2],target id,[color1,color2])    
    consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','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])
      var wordsInterval = window.setInterval(function() {
        if(words.length == 0) {
            window.clearInterval(wordsInterval);
            return;
        }
        
        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)
    }

@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
}
.hidden {
  opacity:0;
}
.console-container {
 
  font-family:Khula;
  font-size:4em;
  text-align:center;
  height:200px;
  width:600px;
  display:block;
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}

<div class='console-container' id='console-container'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div></div>

编辑：无删除（https://codepen.io/anon/pen/eKxrvM）

// function([string1, string2],target id,[color1,color2])    
consoleText(['Hello World.', 'Console Text.', 'Made with Love.'], 'console-container',['tomato','rebeccapurple','lightblue']);

function consoleText(words, containerId, colors) {
  if (colors === undefined) colors = ['#fff'];
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var waiting = false;
  var container = document.getElementById(containerId);
  var targets = [];
  
  words.forEach(() => {
      var newTarget = document.createElement('span');
      targets.unshift(newTarget);
      container.prepend(newTarget);
  });
  var target = targets.shift();
  target.setAttribute('style', 'color:' + colors[0])
  
  var wordsInterval = window.setInterval(function() {
    if(words.length == 0) {
        window.clearInterval(wordsInterval);
        return;
    }
    
    if (letterCount === 0 && waiting === false) {
      waiting = true;
      targets.length && (target = targets.shift());
      //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.length == 0? usedColor: colors[0]))
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = false;
      letterCount = 0;
    } 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)
}

@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
}
.hidden {
  opacity:0;
}
.console-container {
 
  font-family:Khula;
  font-size:4em;
  text-align:center;
  height:200px;
  width:600px;
  display:block;
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}

<div class='console-container' id='console-container'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div></div>

Answer 3

只需将push()移到words数组中，注释下一行，只需键入一次即可。

words.push(usedWord);

PS：应该使用清除间隔，以避免再次调用功能代码。

  if(!words || words.length == 0){
        clearInterval(t);
        return;
    }

选中Codepen for the demo

使用JS停止打字效果

3 个答案: