لقد كتبت اليوم مثالًا رائعًا آخر: نظام تصنيف النجوم (يمكن تخصيص عدد النجوم ومعلومات العرض)
sufustar.star () ؛ يستخدم القيمة الافتراضية لـ 5 نجوم ، معلومات افتراضية
var msg = [......] ؛ sufustar.star (10 ، msg) ؛ عدد النجوم المخصصة هو 10 ، معلومات العرض ، القيمة الافتراضية المرجعية تنسيق MSG ، يجب أن يكون عدد النجوم متسقًا مع عدد النجوم ؛
إن تطبيق بعض الأمثلة بنفسك يتمتع بميزة ، والتي يمكن أن تزيد من كفاءتك في تطبيق نقاط المعرفة المختلفة وأيضًا اختبار نقاط الضعف الخاصة بك! بمجرد اكتشافها ، ابحث فورًا في وثائق API وتعويضها!
لا أعرف ما إذا كنت غبيًا جدًا ، لكن هذا المثال كتب ليوم كامل!
دعونا لا نتحدث هراء ، دعنا نتحدث عن نقاط المعرفة التي تنطوي عليها هذا المثال:
1. استخدم حدود CSS لرسم مثلث واستخدامه قبل إضافته إلى عناصر أخرى ؛
2. تعلم كيفية استخدام CSS لتحديد العناصر ؛
3. وكيل لتعلم الأحداث ؛
4. كيفية تحسين الأداء ؛
5. تطبيق طريقة مطابقة كائن السلسلة وتطبيق التعبيرات العادية ؛
6. تسجيل الأحداث ومعالجة الأحداث يتطلب أساليب الكتابة المتوافقة مع IE ؛
7. تعلم كيفية استخدام '||' لتعيين القيم الافتراضية للمتغيرات ؛
8. تبسيط الرمز: أخرج الكود الذي قد يتكرر واكتبه في وظيفة بشكل منفصل ؛
فيما يلي الرمز الكامل مع التعليقات. إذا كنت لا تفهم ، يرجى التحقق من المستند. مع مستواي الحالي ، لا يمكنني كتابته مثل هذا إلا. إذا كان لديك أي اقتراحات جيدة ، فلا تتردد في الإشارة إلى ذلك!
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </itlem> <style> *{margin: 0 ؛ الحشو: 0 ؛ } #star {الموضع: absolute ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 30 بكسل ؛ أسفل: 0 ؛ الهامش: السيارات ؛ العرض: 80 ٪ ؛ حجم الخط: 12 بكسل ؛ } #star-div {margin: 5px ؛ حجم الخط: 0 ؛ } #star-div a {display: inline block ؛ العرض: 21px ؛ الارتفاع: 21px ؛ الخلفية: url (http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat ؛ } #star-div .on {background: url (http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat ؛ } #star-info {position: absolute ؛ أعلى: 55 بكسل ؛ اليسار: -30 بكسل ؛ العرض: لا شيء ؛ العرض: 155 بكسل ؛ الارتفاع: 50 بكسل ؛ الحشو: 2px ؛ ارتفاع الخط: 17px ؛ الحدود الحدودية: 8px ؛ خلفية اللون: الذهب. Z-index: 5 ؛ } #star-info: قبل {content: '' ؛ Border-Bottom: 10px الذهب الصلب. الحدود اليسرى: 10 بكسل Solid RGBA (0،0،0،0) ؛ اليمين الحدودي: 10 بكسل Solid RGBA (0،0،0،0) ؛ الموقف: مطلق ؛ اليسار: 35 بكسل ؛ أعلى: -10px ؛ } #Star-Span {line-Height: 14px} #Star-Info Strong ، #Star-Span Strong {color: Red ؛ } </style> <script> window.onload = function () {var sufustar = function () {// function function gbyid (id) {return document.getElementById (id) ؛ if (elem.attachevent) {elem.attachevent ('on'+type ، func)}} getIndex (event) {// متوافق مع ie var e = event || window.event ؛ var t = e.target || E.Srcelement ؛ if (t.tagname.toLowerCase () === 'a') {return parseint (t.innerhtml) ؛ }} وظيفة showInfo (index ، msg) {var info = gbyid ('star-info') ؛ info.style.display = 'block' ؛ info.style.left = index*21-51+'px' ؛ info.innerhtml = "<strong>"+index+'points'+msg [index-1] .match (/(.+)/ |/) [1]+'<br />'+'</strong>'+msg budapindex-1//-// cout( .+)/) budap1] ؛ } وظيفة appenstar (elem ، nums) {var fragment = document.createdOcumentFragment () ؛ // من أجل تحسين الأداء ، نظرًا لاستخدام DocumentFragment للتلف في وقت واحد ، سيتم إعادة صياغة الصفحة مرة واحدة فقط لـ (var i = 0 ؛ i <nums ؛ i ++) {var a = document.createElement ('a') ؛ A.InnerHtml = i+1 ؛ A.Href = "JavaScript :؛" ؛ // السلوك الافتراضي لحظر المتصفح ، انقر فوق ارتباط الشظية. appendchild (a) ؛ } elem.appendchild (frag) ؛ } // وظيفة دالة الجسم (num ، mymsg) {var n = num || 5 ؛ // عندما يكون لـ NUM قيمة ، خذ قيمته ، وإذا لم تكن هناك قيمة ، خذ القيمة الافتراضية 5 ؛ var clickstar = currentStar = 0 ؛ . "راضية جدًا | الجودة جيدة جدًا ، ومتسقة تمامًا مع وصف البائع ، راضيا للغاية"] ؛ var starcontainer = gbyid ('star-div') ؛ Appenstar (StarContainer ، n) ؛ addevent (starcontainer ، 'mouseover' ، أكثر) ؛ // استخدم وضع وكيل الأحداث (حدث وكيل من خلال العنصر الأصل من علامة <a>) addevent (starcontainer ، 'mouseout' ، out) ؛ AddEvent (StarContainer ، "انقر فوق" ، انقر فوق) ؛ وظيفة Over (event) {if (getIndex (event)) {// إذا كان GetIndex (الحدث) لا يمكن الحصول على القيمة ، فهذا يعني أن هدف الحدث المشغل الحالي ليس <a> tag var index = getIndex (event) ؛ التغيير (الفهرس) ؛ ShowInfo (index ، msg) ؛ }} function out (event) {change () ؛ // قم بتعيين النتيجة للنقر فوق ClickStar GbyId ('star-info'). style.display = 'none'} انقر فوق (حدث) {if (getIndex (event)) {var index = getIndex (event) ؛ ClickStar = فهرس ؛ // احفظ حالة النقر gbyid ('star-info'). style.display = 'none' ؛ gbyid ('star -span'). innerhtml = "<strong>" + index + 'point' + msg [index - 1] .match (/( .+)/ |/) [1] + '</strong>' + '<br/>' + msg [index - 1] .Match (// | (. +)/) [1] ؛ }} تغيير الوظيفة (الفهرس) {currentStar = index || clickstar ؛ لـ (var i = 0 ؛ i <n ؛ i ++) {starcontainer.children [i] .className = i <currentStar؟ 'on': ''}}} return {star: star}} () ؛ // تعني () هنا أن الوظيفة يتم تنفيذها على الفور ، بحيث يمكن للمتغير sufustar استدعاء قيمة الإرجاع لنجوم الدالة المجهول // تنفيذ المكالمة: sufustar.star (num ، mymsg) ، يمكن أن تكون المعلمة فارغة ، المعلمة num ، mymsg على القيمة الافتراضية sufustar.star () ؛ } </script> </head> <body> <div id = "star"> <span> انقر فوق النجوم للتسجيل: </span> <div id = "star-div"ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.