لنلقي نظرة على مخطط التنفيذ أولاً
خطوات تنفيذ التأثير:
1. الحصول على العناصر لاستخدامها ؛
2. إعلان متغير صفيف ( arrColor ) لتخزين قيم الألوان ؛
3. أضف انقر فوق أحداث إلى الزر ؛
4. احصل على value مربع النص واستخدم طريقة split لتحويل قيمة سلسلة مربع النص إلى صفيف ( arr ) وتخزينها ؛
5. حلقة القيمة في المصفوفة المخزنة ( arr ) وأضف علامة span ؛
6. اضبط لون الخلفية لعلامة span : حلقة القيمة من الصفيف ( arrColor ) ؛
7. إضافة محتوى تعيين إلى div ؛
الرمز الكامل تأثير:
<! doctype html> <html> <head> <meta charset = "utf-8"> مثال على استخدام طريقة الانقسام في JS لتحقيق تأثير خلفية النص الملون </title> <style> div {width: 300px ؛ الارتفاع: 200 بكسل ؛ الحدود: 1 بكسل Solid #333 ؛ الخلفية: #fff ؛ الحشو: 20 بكسل ؛ رفع الخط: 40 بكسل ؛ } 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 = "background:'+arrcolor [i ٪ arrcolor.length]+'">'+arr [i]+'</span>' ؛ } odiv.innerhtml += arr.join ('') ؛ }} </script> </head> <body> <div id = "div1"> </div> <input type = "text"/> <input type = "button" value = "button"/> </body> </html>لخص
انتهى مثال استخدام طريقة الانقسام في JS لتحقيق تأثير خلفية النص الملون. يمكن للأصدقاء المهتمين القيام بذلك بأنفسهم ، على أمل أن يكون ذلك مفيدًا لدراسة الجميع وعملهم.