Lassen Sie bestimmte Buchstaben in <p> in verschiedenen Farben erscheinen

Question

Ich habe eine Website mit einer befehlszeilenähnlichen Animation, was bedeutet, dass beim Aktualisieren eine Phrase eingegeben wird. Es funktioniert gut, aber ich möchte, dass bestimmte Buchstaben (XYZ) in Neonrosa angezeigt werden. Ich habe auf viele Arten versucht, es zum Laufen zu bringen, aber es gelang mir einfach nicht. Weiß jemand, wie man das macht?

Ich habe versucht, ein weiteres hinzuzufügen , aber die Schleife funktioniert nicht richtig.

// 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 = '&gt;' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
        } else {
          loc.innerHTML = '&gt;' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
          typeLetter();
        }
      }, timeChar);
    };