Давайте сначала посмотрим на диаграмму реализации
Эффективные шаги внедрения:
1. Получите элементы, которые будут использоваться;
2. Объявите переменную массива ( arrColor ) для хранения значений цвета;
3. Добавить события нажимайте в кнопку;
4. Получите value значения текстового поля и используйте метод split , чтобы преобразовать строковое значение текстового поля в массив ( arr ) и сохранить его;
5. Целью значения в сохраненном массиве ( arr ) и добавьте тег span ;
6. Установите цвет фона метки span : зацикливаться на значении из массива ( arrColor );
7. Добавьте установленное содержимое в div ;
Полный код эффекта:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> Пример использования метода разделения в JS для достижения цветного текстового фона эффекта </title> <style> div {width: 300px; Высота: 200px; Граница: 1PX SOLID #333; Фон: #fff; Заполнение: 20px; высота линии: 40px; } span {padding: 5px 15px; Семейство шрифта: 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 = "background:'+arrcolor [i%arrcolor.length]+'">'+arr [i]+'</span>'; } odiv.innerhtml += arr.join (''); }} </script> </head> <body> <div id = "div1"> </div> <input type = "text"/> <input type = "кнопка" value = "cutting"/> </body> </html>Суммировать
Пример использования метода разделения в JS для достижения цветного текстового фонового эффекта закончен. Заинтересованные друзья могут сделать это самостоятельно, надеясь, что это будет полезно для каждого обучения и работы.