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