Jetons un coup d'œil au diagramme de mise en œuvre d'abord
Étapes de mise en œuvre de l'effet:
1. Faites utiliser les éléments;
2. Déclarer une variable de tableau ( arrColor ) pour stocker les valeurs de couleur;
3. Ajouter des événements de clic sur le bouton;
4. Obtenez value valeur de la valeur de la zone de texte et utilisez la méthode split pour convertir la valeur de chaîne de la zone de texte en un tableau ( arr ) et le stocker;
5. Luiper la valeur dans le tableau stocké ( arr ) et ajouter span ;
6. Définissez la couleur d'arrière-plan de l'étiquette span : Loop la valeur du tableau ( arrColor );
7. Ajoutez le contenu défini div ;
L'effet Code complet:
<! doctype html> <html> <éadf> <meta charset = "utf-8"> <tapie> Exemple d'utilisation de la méthode divisée en js pour réaliser un effet de fond de texte coloré </title> <style> div {width: 300px; hauteur: 200px; Border: 1px solide # 333; Contexte: #FFF; rembourrage: 20px; hauteur de ligne: 40px; } span {padding: 5px 15px; Font-Family: Microsoft Yahei; } </ style> <cript> window.onload = function () {var odiv = document.getElementById ('div1'); var ainp = document.getElementsByTagName ('entrée'); 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% arcolor.length] + '">' + arr [i] + '</span>'; } odiv.innerhtml + = arr.join (''); }} </ script> </ head> <body> <div id = "div1"> </ div> <input type = "text" /> <input type = "bouton" value = "bouton" /> </ body> </html>Résumer
L'exemple d'utilisation de la méthode divisée en JS pour atteindre l'effet de fond de texte coloré est terminé. Les amis intéressés peuvent le faire par eux-mêmes, en espérant que cela sera utile à l'étude et au travail de chacun.