Schauen wir uns zuerst das Implementierungsdiagramm an
Implementierungsschritte auswirken:
1. Die Elemente verwenden;
2. Deklarieren Sie eine Array -Variable ( arrColor ), um Farbwerte zu speichern.
3. Fügen Sie der Schaltfläche Klicken zu Ereignissen hinzu.
4. Nehmen Sie value Wertwert des Textfelds ab und verwenden Sie die split -Methode, um den Zeichenfolgenwert des Textfelds in ein Array ( arr ) zu konvertieren und zu speichern.
5. Schleifen Sie den Wert im gespeicherten Array ( arr ) aus und fügen Sie span -Tag hinzu.
6. Stellen Sie die Hintergrundfarbe des span -Label ein: Schleifen Sie den Wert aus dem Array ( arrColor );
7. Fügen Sie den festgelegten Inhalt div hinzu;
Der Effekt vollständiger Code:
<! docType html> <html> <head> <meta charset = "utf-8"> <title> Beispiel für die Verwendung von Split-Methoden in JS, um einen farbigen Texthintergrund zu erzielen. Höhe: 200px; Grenze: 1PX Solid #333; Hintergrund: #fff; Polsterung: 20px; Zeilenhöhe: 40px; } span {padding: 5px 15px; Schriftfamilie: Microsoft Yahei; } </style> <script> window.onload = function () {var odiv = document.getElementById ('div1'); var ainp = document.getElementsByTagName ('input'); var arrcolor = ['#f00', '#ff0', '#f0f', '#0ff']; AINP [1] .onclick = function () {var str = ainp [0] .Value; var arr = str.split (''); für (var i = 0; i <arr.length; i ++) {arr [i] = '<span style = "Hintergrund:'+arrcolor [i%arrcolor.length]+'">'+arr [i]+'</span>'; } odiv.innerhtml += arr.join (''); }} </script> </head> <body> <div id = "div1"> </div> <Eingabe type = "text"/> <Eingabe type = "button" value = "button"/> </body> </html>Zusammenfassen
Das Beispiel für die Verwendung der Split -Methode in JS, um einen farbigen Texthinterffekt zu erzielen, ist vorbei. Interessierte Freunde können es selbst tun und hoffen, dass es für das Studium und die Arbeit aller hilfreich sein wird.