Jadikan huruf tertentu muncul dalam warna yang berbeza dalam <p>

Question

Saya mempunyai tapak web yang mempunyai baris arahan seperti animasi yang bermaksud apabila saya menyegarkannya ia akan menaip frasa. Ia berfungsi dengan baik, tetapi saya mahu huruf tertentu (XYZ) muncul dalam warna merah jambu neon. Saya cuba membuatnya berfungsi dalam pelbagai cara tetapi tidak dapat. Adakah sesiapa tahu bagaimana untuk melakukan ini?

Saya cuba menambah satu lagi tetapi gelung tidak berfungsi dengan betul.

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

Jika anda memasukkan gaya dalam teks anda, seperti ini, ia merosakkan masa, bukan?

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

Anda boleh menyelesaikan masalah ini dengan meletakkan letterCount 索引推进到 typeLetter sebarang tag dalam fungsi:

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