Primero echemos un vistazo al diagrama de implementación
Pasos de implementación del efecto:
1. Obtenga los elementos para ser utilizados;
2. Declarar una variable de matriz ( arrColor ) para almacenar valores de color;
3. Agregue los eventos de clic al botón;
4. Obtenga value valor de valor del cuadro de texto y use el método split para convertir el valor de cadena del cuadro de texto en una matriz ( arr ) y guárdelo;
5. Lise el valor en la matriz almacenada ( arr ) y agregue span ;
6. Establezca el color de fondo de la etiqueta span : bucle el valor de la matriz ( arrColor );
7. Agregue el contenido establecido al div ;
El efecto Código completo:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Ejemplo de usar el método dividido en JS para lograr el efecto de fondo de texto coloreado </title> <style> div {width: 300px; Altura: 200px; borde: 1px Solid #333; Antecedentes: #fff; relleno: 20px; Línea de altura: 40px; } span {relleno: 5px 15px; Font-Family: 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 (''); for (var i = 0; i <arr.length; i ++) {arr [i] = '<span style = "en segundo plano:'+arrcolor [i%arrcolor.length]+'">'+arr [i]+'</span>'; } odiv.innerhtml += arr.join (''); }} </script> </head> <body> <div id = "div1"> </div> <input type = "text"/> <input type = "button" value = "button"/> </bod> </html>Resumir
El ejemplo de usar el método dividido en JS para lograr el efecto de fondo de texto coloreado ha terminado. Los amigos interesados pueden hacerlo por sí mismos, con la esperanza de que sea útil para el estudio y el trabajo de todos.