มาดูแผนภาพการใช้งานก่อน
ขั้นตอนการใช้งานเอฟเฟกต์:
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; Padding: 20px; สายไฟ: 40px; } span {padding: 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 (''); สำหรับ (var i = 0; i <arr.length; i ++) {arr [i] = '<span style = "พื้นหลัง:'+arrcolor [i%arrcolor.length]+'">'+arr [i]+'</span>'; } odiv.innerhtml += arr.join (''); }} </script> </head> <body> <div id = "div1"> </div> <อินพุต type = "text"/> <อินพุต type = "ปุ่ม" value = "ปุ่ม"/> </body> </html>สรุป
ตัวอย่างของการใช้วิธีการแยกใน JS เพื่อให้ได้เอฟเฟกต์พื้นหลังข้อความสีจบลงแล้ว เพื่อนที่สนใจสามารถทำได้ด้วยตัวเองโดยหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาและการทำงานของทุกคน