Vamos dar uma olhada no diagrama de implementação primeiro
Efeito de implementação de efeitos:
1. Obtenha os elementos a serem usados;
arrColor .
3. Adicione eventos de clique no botão;
4. Obtenha value valor do valor da caixa de texto e use o método split para converter o valor da string da caixa de texto em uma matriz ( arr ) e armazená -la;
5. Faça o valor da matriz armazenada ( arr ) e adicione span ;
6. Defina a cor de fundo do rótulo span : loop o valor da matriz ( arrColor );
7. Adicione o conteúdo definido à div ;
O código completo do efeito:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> Exemplo de uso do método dividido em JS para obter efeito de fundo de texto colorido </title> <estilo> div {largura: 300px; Altura: 200px; borda: 1px sólido #333; Antecedentes: #FFF; preenchimento: 20px; altura da linha: 40px; } span {preenchimento: 5px 15px; Fonte-família: Microsoft Yahei; } </style> <cript> 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> </ading> <body> <div id = "div1"> </div> <input type = "text"/> <input type = "button" value = "button"/> </body> </html>Resumir
O exemplo de uso do método dividido no JS para obter o efeito de fundo de texto colorido acabou. Os amigos interessados podem fazer isso sozinhos, esperando que seja útil para estudar e trabalhar de todos.