Heute habe ich ein weiteres cooles Beispiel geschrieben: Star -Bewertungssystem (kann die Anzahl der Sterne anpassen und Informationen anzeigen).
sufustar.star (); Verwendet den Standardwert von 5 Sternen, Standardinformationen
var msg = [......]; sufustar.star (10, msg); Die Anzahl der benutzerdefinierten Sterne beträgt 10, Anzeigeninformationen, MSG -Formatreferenz Standardwert, die Anzahl der Sterne muss mit der Anzahl der Sterne übereinstimmen.
Die Implementierung einiger Beispiele selbst hat einen Vorteil, der Ihre Fähigkeiten bei der Anwendung verschiedener Wissenspunkte erhöhen und auch Ihre eigenen Schwächen testen kann! Wenn Sie nach der Entdeckung entdeckt, suchen Sie sofort die API -Dokumentation und machen Sie das aus!
Ich weiß nicht, ob ich zu dumm bin, aber dieses Beispiel wurde für einen ganzen Tag geschrieben!
Lassen Sie uns keinen Unsinn sprechen. Lassen Sie uns über die in diesem Beispiel verbundenen Wissenspunkte sprechen:
1. Verwenden Sie den CSS -Rand, um ein Dreieck zu zeichnen und es vorher zu verwenden, um es anderen Elementen hinzuzufügen.
2. Erfahren Sie, wie Sie CSS verwenden, um Elemente zu lokalisieren.
3. Agent für Lernveranstaltungen;
4.. Wie man die Leistung optimiert;
5. Anwendung der Match -Methode des String -Objekts und der Anwendung regulärer Ausdrücke;
6. Für die Registrierung von Ereignissen und Ereignisbehandlungen sind IE-kompatible Schreibmethoden erforderlich.
7. Lernen Sie, wie man '||' verwendet. ' Standardwerte für Variablen festlegen;
8. Vereinfachen Sie den Code: Nehmen Sie den Code heraus, der wiederholt werden kann, und schreiben Sie ihn separat in eine Funktion.
Unten finden Sie den vollständigen Code mit Kommentaren. Wenn Sie es nicht verstehen, überprüfen Sie bitte das Dokument. Mit meinem aktuellen Level kann ich es nur so schreiben. Wenn Sie gute Vorschläge haben, können Sie bitte darauf hinweisen!
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <style> *{Margin: 0; Polsterung: 0; } #star {Position: absolut; links: 0; Rechts: 0; Top: 30px; unten: 0; Rand: Auto; Breite: 80%; Schriftgröße: 12px; } #stern-div {margin: 5px; Schriftgröße: 0; } #stern-div a {display: inline-block; Breite: 21px; Höhe: 21px; Hintergrund: URL (http://files.cnblogs.com/files/susufufu/star0.gif) No-Repeat; } #star-div .on {Hintergrund: url (http://files.cnblogs.com/files/susufufu/star1.gif) No-Repeat; } #star-info {Position: absolut; Oben: 55px; Links: -30px; Anzeige: Keine; Breite: 155px; Höhe: 50px; Polsterung: 2px; Zeilenhöhe: 17px; Border-Radius: 8px; Hintergrundfarbe: Gold; Z-Index: 5; } #STAR-INFO: Vor {Inhalt: ''; Grenzboden: 10px Festes Gold; Border-Links: 10px Solid RGBA (0,0,0,0); Grenzrechte: 10px Solid RGBA (0,0,0,0); Position: absolut; links: 35px; Top: -10px; } #STAR-SPAN {Zeilenhöhe: 14px} #STAR-INFO Strong, #STAR-Span Strong {color: rot; } </style> <script> window.onload = function(){ var sufuStar = function (){ //Tool function function gbyId(id){return document.getElementById(id);} function addEvent(elem,type,func){ //Compatible with IE if(elem.addEventListener){ elem.addEventListener(type,func,false) }else if (Elem.attachEvent) {Elem.attachEvent ('on'+type, func)}} Funktion getIndex (Ereignis) {// kompatibel mit IE var e = Ereignis || Fenster.Event; var t = e.target || e.srcelement; if (t.tagname.tolowerCase () === 'a') {return parseInt (t.innerhtml); }} Funktion showInfo (index, msg) {var info = gbyId ('star-info'); info.style.display = 'block'; info.style.left = index*21-51+'px'; info.innerhtml = "<strong>"+index+'punkte'+msg [index-1] .match (/(.+)/ |/) [1]+'<br />'+'</strong>'+msg?index-1,match(//|(+ } function attenstar (elem, nums) {var fragment = document.createCumentFragment (); // Um die Leistung zu verbessern, wird die Seite nur einmal für (var i = 0; i <nums; i ++) {var a = document.createelement ('a') nur einmal wiedergegeben, um die Leistung zu verbessern, da Dokumentfragment verwendet wird. A.innerhtml = i+1; A.reif = "JavaScript:;"; // Das Standardverhalten des Blockierens von Browser klicken Sie auf Link Fragment.AppendChild (a); } Elem.AppendChild (Frag); } // der Körperfunktionsfunktionsstern (num, MYMSG) {var n = num || 5; // Wenn Num einen Wert hat, nimm seinen Wert und nimm den Standardwert 5; var clickStar = currentStar = 0; //clickStar saves click status var msg = myMsg||[ "Very dissatisfied|It is too bad, seriously inconsistent with the seller's description, very dissatisfied", "Dissatisfied|partially damaged, inconsistent with the seller's description, not satisfied", "General|quality is average, not as good as the seller's description", "Satisfied|quality is good, basically consistent with the seller's description, quite satisfied", "Sehr zufriedenes | Qualität ist sehr gut, völlig übereinstimmt mit der Beschreibung des Verkäufers, sehr zufrieden"]; var starcontainer = gbyid ('stern-div'); Appenstar (StarContainer, n); AddEvent (StarContainer, 'Mouseover', Over); // Event Proxy -Modus (Proxy -Ereignis über das übergeordnete Element des <a> Tags) AddEvent (StarContainer, 'Mouseout', out) verwenden; AddEvent (StarContainer, 'Click', Click); Funktion over (Ereignis) {if (getIndex (Ereignis)) {// if getIndex (Ereignis) kann den Wert nicht erhalten. Dies bedeutet, dass das Ziel des aktuellen Auslösenereignisses nicht <a> Tag var index = getIndex (Ereignis) ist; Änderung (Index); ShowInfo (Index, MSG); }} Funktion (Ereignis) {change (); // Setzen Sie die Punktzahl auf Klickstatus ClickStar gById ('star-info'). Style.display = 'none'} Funktion Click (Ereignis) {if (getIndex (Ereignis)) {var index = getIndex (Ereignis); clickStar = index; // Speichern Sie den Klickstatus gByID ('star-info'). Style.display = 'none'; gById ('stern -span'). InnerHtml = "<strong>" + index + 'point' + msg [index - 1] .match (/(.+)/ |/) [1] + '</strong>' + '<br/>' + msg [index - 1] .match (// | (. +)/) [1]; }} Funktionsänderung (Index) {currentStar = index || clickStar; für (var i = 0; i <n; i ++) {starcontainer.children [i] .className = i <currentStar? 'on': ''}}} return {star: star}} (); // Die () hier bedeutet, dass die Funktion sofort ausgeführt wird, so dass der Variable Sufustar den Rückgabewert des anonymen Funktionssterns aufrufen kann // Ausführung aufrufen: sufustar.star (num, myMsg), der Parameter kann leer sein, der Parameter num, MYMSG wird auf den Default -Wert -Sugustar eingestellt.star (); } </script> </head> <body> <div id = "star"> <span> Klicken Sie auf die Sterne, um zu bewerten: </span> <div id = "star-div"> </div> <span id = "stern-span"> </span> <p id = "star-info"Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.