我有一个网站，它有一个类似命令行的动画，这意味着当我刷新它时它会输入一个短语。它工作正常，但我希望某些字母 (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 + '' + cursorChar + '' + cursorChar + ''; 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; } }

ABCXYZDEF
 
>_