Aujourd'hui, j'ai écrit un autre exemple sympa: Système d'évaluation des étoiles (peut personnaliser le nombre d'étoiles et d'informations d'affichage)
sufustar.star (); utilise la valeur par défaut de 5 étoiles, informations par défaut
var msg = [......]; sufustar.star (10, msg); Le nombre d'étoiles personnalisées est de 10, les informations d'affichage, la valeur par défaut de référence du format MSG, le nombre d'étoiles doit être cohérent avec le nombre d'étoiles;
La mise en œuvre de certains exemples a un avantage, ce qui peut augmenter votre compétence en appliquant divers points de connaissance et également tester vos propres faiblesses! Une fois découvert, recherchez immédiatement la documentation de l'API et compensez-le!
Je ne sais pas si je suis trop stupide, mais cet exemple a été écrit pendant une journée entière!
Ne parlons pas de bêtises, parlons des points de connaissance impliqués dans cet exemple:
1. Utilisez la bordure CSS pour dessiner un triangle et utiliser avant pour l'ajouter à d'autres éléments;
2. Apprenez à utiliser CSS pour localiser les éléments;
3. Agent pour les événements d'apprentissage;
4. Comment optimiser les performances;
5. Application de la méthode de correspondance de l'objet String et application des expressions régulières;
6. L'enregistrement des événements et la gestion des événements nécessite des méthodes d'écriture compatibles IE;
7. Apprenez à utiliser '||' pour définir des valeurs par défaut pour les variables;
8. Simplifiez le code: retirez le code qui peut être répété et écrivez-le dans une fonction séparément;
Vous trouverez ci-dessous le code complet avec des commentaires. Si vous ne comprenez pas, veuillez consulter le document. Avec mon niveau actuel, je ne peux que l'écrire comme ça. Si vous avez de bonnes suggestions, n'hésitez pas à le signaler!
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> </title> <style> * {margin: 0; rembourrage: 0; } #Star {position: absolue; à gauche: 0; à droite: 0; En haut: 30px; en bas: 0; marge: auto; Largeur: 80%; taille de police: 12px; } # star-div {margin: 5px; taille de police: 0; } # star-div a {display: en ligne de bloc; Largeur: 21px; hauteur: 21px; Contexte: 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: absolue; En haut: 55px; Gauche: -30px; Affichage: aucun; Largeur: 155px; hauteur: 50px; rembourrage: 2px; hauteur de ligne: 17px; Border-Radius: 8px; Color en arrière-plan: or; Z-Index: 5; } # star-info: avant {contenu: ''; Border-Bottom: 10px en or massif; Border-Left: 10px RGBA solide (0,0,0,0); Border-droite: 10px RGBA solide (0,0,0,0); Position: absolue; Gauche: 35px; en haut: -10px; } # star-span {line-height: 14px} # star-info Strong, # star-span Strong {Color: Red; } </ style> <cript> window.onLoad = function () {var sufustar = function () {// Fonction de la fonction d'outil gbyid (id) {return document.getElementById (id);} function ADDEVENT (elem, type, func) {// compatible avec ie if (elem.addeventLed) {elem.adDeventListener (Type, func, false)} if (elem.attachevent) {elem.attachevent ('on' + type, func)}} function getIndex (event) {// compatible avec ie var e = event || window.event; var t = e.target || e.srcelement; if (t.tagname.tolowercase () === 'a') {return parseInt (t.innerhtml); }} fonction showInfo (index, msg) {var info = gbyid ('star-info'); info.style.display = 'bloc'; info.style.left = index * 21-51 + 'px'; info.innerhtml = "<strong>" + index + 'Points' + msg [index-1] .match (/(.+)/ | /) [1] + '<br />'+'</strong>'[email protected](/|(.+)/)*1]; } fonction Appenstar (elem, nums) {var fragment = document.CreateDocumentFragment (); // Afin d'améliorer les performances, car DocumentFragment est utilisé pour ajouter en même temps, la page ne sera remensionnée qu'une seule fois pour (var i = 0; i <nums; i ++) {var a = document.CreateElement ('a'); a.innerhtml = i + 1; a.href = "javascript:;"; // Le comportement par défaut du blocage de blocage cliquez sur Fragment de lien.APPENDCHILD (A); } elem.appendChild (frag); } // La fonction de fonction corporelle Star (num, mymsg) {var n = num || 5; // Lorsque NUM a une valeur, prenez sa valeur et s'il n'y a pas de valeur, prenez la valeur par défaut 5; var clickstar = currentStar = 0; // ClickStar enregistre le statut de clic var msg = mymsg || ["Très insatisfait | C'est dommage, gravement incompatible avec la description du vendeur, très insatisfait", "insatisfait | partiellement endommagé, incompatible avec la description du vendeur, non satisfait", "Général | La qualité est moyenne, pas aussi bonne que la description du vendeur", "Satisfait | Satisfait "," Très satisfait | La qualité est très bonne, entièrement cohérente avec la description du vendeur, très satisfaite "]; var starContainer = gbyid ('star-div'); Appenstar (StarContainer, N); addEvent (StarContainer, «Mouseover», sur); // Utilisez le mode proxy de l'événement (événement proxy via l'élément parent de la <a> balise) addEvent (StarContainer, «Mouseout», out); AddEvent (StarContainer, 'Click', cliquez); fonction sur (événement) {if (getIndex (événement)) {// Si getIndex (événement) ne peut pas obtenir la valeur, cela signifie que la cible de l'événement de déclenchement actuel n'est pas <a> tag var index = getIndex (événement); modifier (index); showInfo (index, msg); }} function out (event) {change (); // Définissez le score sur l'état cliqué ClickStar GBYID ('Star-Info'). Style.Display = 'None'} Fonction cliquez sur (événement) {if (getIndex (événement)) {var index = getIndex (événement); clickstar = index; // Enregistrer l'état de clic gbyid ('star-info'). Style.display = 'Aucun'; gbyid ('star-span'). innerhtml = "<strong>" + index + 'point' + msg [index - 1] .match (/(.+)/ | /) [1] + '</strong>' + '<r />' + msg [index - 1] .match (// | (. +) /) [1]; }} Changement de fonction (index) {currentStar = index || ClickStar; for (var i = 0; i <n; i ++) {starContainer.children [i] .classname = i <currentstar? 'on': ''}}} return {star: star}} (); // le () ici signifie que la fonction est exécutée immédiatement, afin que la variable sufustar puisse appeler la valeur de retour de la fonction anonyme star // EXECUTION D'APPEL: sufustar.star (num, mymsg), le paramètre peut être vide, le paramètre num, mymsg sera défini sur la valeur par défaut sufustar.star (); } </ script> </ head> <body> <div id = "star"> <span> cliquez sur les étoiles pour marquer: </span> <div id = "star-div"> </ div> <spann id = "star-span"> </span> <p id = "star-info"> </p> </div> </ body> </html>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.