如何在JS打字机效果中不删除第一个单词?

时间:2018-10-17 05:11:45

标签: javascript text typewriter

我正拼命寻找以下打字机效果的变体:我很想在第一个句子建立之后不删除第一个单词:

理想情况下,第一行“我的第一句话”建立起来,然后仅删除“第一句话”,并且第一个单词“我的”停留在屏幕上。然后建立“第二句”,将其删除,然后建立“第三句”,将其删除,然后建立“最后一句”,最后,整个字符串“我的最后一句”保留在屏幕上。预先感谢您一百万的支持!

PS:以下是易于编辑的链接:codepen.io/stevenkeen/pen/ZqrBWg

// function([string1, string2], target id, [color1,color2], initial pause, final pause)
consoleText(
  [
    "My first sentence",
    "My second sentence",
    "My third sentence",
    "My last sentence"
  ],
  "text",
  ["tomato", "rebeccapurple", "lightblue"],
  5000,
  500000
);

function consoleText(words, id, colors, initialPause, finalPause) {
  if (colors === undefined) colors = ["#fff"];
  var visible = true;
  var con = document.getElementById("console");
  var letterCount = 1;
  var x = 1;
  var initialCount = 0;
  var waiting = false;
  var target = document.getElementById(id);
  var justStarted = true;
  target.setAttribute("style", "color:" + colors[0]);
  window.setInterval(function() {
    if (initialCount < initialPause) {
      initialCount += 120;
    } else if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount);
      window.setTimeout(function() {
        var usedColor = colors.shift();
        var usedWord = words.shift();
        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;
      }, words.length === 1 ? finalPause : 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'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div></div>

0 个答案:

没有答案