Mari kita lihat diagram implementasi terlebih dahulu
Langkah Implementasi Efek:
1. Dapatkan elemen untuk digunakan;
2. Deklarasikan variabel array ( arrColor ) untuk menyimpan nilai warna;
3. Tambahkan Klik Acara ke tombol;
4. Dapatkan value nilai kotak teks dan gunakan metode split untuk mengonversi nilai string kotak teks menjadi array ( arr ) dan simpan;
5. Lingkarkan nilai dalam array yang disimpan ( arr ) dan tambahkan tag span ;
6. Atur warna latar belakang label span : loop nilai dari array ( arrColor );
7. Tambahkan konten yang disetel ke div ;
Efek Kode Lengkap:
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> Contoh penggunaan metode split dalam JS untuk mencapai efek latar belakang teks berwarna </iteme> <tyle> div {width: 300px; Tinggi: 200px; Perbatasan: 1px solid #333; Latar belakang: #FFF; padding: 20px; Line-Height: 40px; } span {padding: 5px 15px; Font-Family: Microsoft Yahei; } </tyle> <script> window.onload = function () {var odiv = document.geteLementById ('div1'); var ainp = document.geteLementsByTagname ('input'); var arrcolor = ['#f00', '#ff0', '#f0f', '#0ff']; inp [1] .onClick = function () {var str = ainp [0] .value; var arr = str.split (''); untuk (var i = 0; i <arr.length; i ++) {arr [i] = '<span style = "latar belakang:'+arrcolor [i%arrcolor.length]+'">'+arr [i]+'</span>'; } odiv.innerhtml += arr.join (''); }} </script> </head> <body> <v id = "div1"> </div> <input type = "text"/> <input type = "tombol" value = "tombol"/> </body> </html>Meringkaskan
Contoh penggunaan metode split di JS untuk mencapai efek latar belakang teks berwarna sudah berakhir. Teman -teman yang tertarik dapat melakukannya sendiri, berharap itu akan membantu untuk belajar dan bekerja semua orang.