使特定字母在 <p> 内以不同颜色显示

Question

我有一个网站，它有一个类似命令行的动画，这意味着当我刷新它时它会输入一个短语。它工作正常，但我希望某些字母 (XYZ) 以霓虹粉红色显示。我试图通过多种方式让它发挥作用，但就是做不到。有谁知道怎么做吗？

我尝试添加另一个，但循环工作不正常。

// set typing speed and wait times
var timeInit = 400; // initial wait before typing first line
var timeGap = 1000; // wait time between each line
var timeChar = 110; // time until next letter

var cursorChar = '_';

var originId = ['line1'];
var originText = new Array();
for (var i = 0; i < originId.length; i++) {
  originText.push(document.getElementById(originId[i]).innerHTML);
}

var cursorLine = document.getElementById('cursor-line');

var currentTimeout;
var showCursor;

var typeWriter = function(index) {
  var loc = document.getElementById(originId[index]);
  var fullText = originText[index];
  var letterCount = 0;

  // this function spits out one letter per call, then calls the subsequent typeLetter()
  var typeLetter = function() {
    currentTimeout = setTimeout(function() {
      loc.className = 'visible';
      letterCount += 1;
      var showText = fullText.substring(0, letterCount);

      // stops the function from self-calling when all letters are typed
      if (letterCount === fullText.length) {
        loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</spa';
      } else {
        loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
        typeLetter();
      }
    }, timeChar);
  };

  typeLetter();

  // show cursor on next line
};

// calculated time delays
var delayTime = [timeInit];
var cumulativeDelayTime = [timeInit];
for (var i = 0; i < originId.length; i++) {
  var elapsedTimeLine = originText[i].length * timeChar + timeGap + timeChar * 2;
  delayTime.push(elapsedTimeLine);
  var sum = 0;
  for (var j = 0; j < delayTime.length; j++) {
    sum += delayTime[j];
  }
  cumulativeDelayTime.push(sum);
}

// calls setTimeout for each line
var typeLineTimeout = new Array();
for (var i = 0; i < originId.length; i++) {
  typeLineTimeout[i] = setTimeout(
    (function(index) {
      return function() {
        cursorLine.className = 'hidden';
        typeWriter(index);
      };
    })(i),
    cumulativeDelayTime[i]
  );
}

// stops all timeouts
var skip = function() {
  clearTimeout(currentTimeout);
  clearTimeout(showCursor);
  for (var i = 0; i < typeLineTimeout.length; i++) {
    clearTimeout(typeLineTimeout[i]);
  }
};

// rewrite text with value stored on page load

// var rewriteText = function(index) {
//   var loc = document.getElementById(originId[index]);
//   loc.innerHTML = '> ' + originText[index];
//   loc.className = 'visible';
// };

// trigger skip and rewrite on pressing enter or spacebar
window.onkeydown = function(key) {
  if (key.which === 13 || key.which === 32) {
    skip();
    originId.forEach(rewriteText);
    document.getElementById('cursor-line').className = 'visible';
  }
};

body {
  font-family: monospace;
  background-color: black;
  color: white;
  text-align: center;
  margin-top: 21%;
}

.neon-pink {
  color: #ff00ff;
  /* Neon Pink color code */
}

.hidden {
  display: none;
  visibility: hidden;
}


/* ----- blinking cursor animation ----- */

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.95s infinite;
  -moz-animation: blink 0.95s infinite;
  -ms-animation: blink 0.95s infinite;
  -o-animation: blink 0.95s infinite;
  animation: blink 0.95s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<p id="line1" class="hidden">ABCXYZDEF</p>
<p id="cursor-line" class="visible">><span class="typed-cursor">_</span></p>

Answer 1

如果您在文本中包含样式，就像这样，它会扰乱时间，对吧？

<p id="line1" class="hidden">ABC<span class="neon-pink">XYZ</span>DEF</p>

您可以通过将 letterCount 索引推进到 typeLetter 函数中的任何标记来解决此问题：

    var typeLetter = function() {
      currentTimeout = setTimeout(function() {
        loc.className = 'visible';
        letterCount += 1;
        // Advance index past the markup
        if (fullText[letterCount] === '<') {
          while (fullText[++letterCount] !== ">") {
          }
          ++letterCount;
        }
        var showText = fullText.substring(0, letterCount);

        // stops the function from self-calling when all letters are typed
        if (letterCount === fullText.length) {
          loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
        } else {
          loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
          typeLetter();
        }
      }, timeChar);
    };