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 lagitetapi 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 + '' + 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
 
>_