JS erhält Fünf-Sterne-Lob
|
In diesem Artikel wird der spezifische Code von JS zur Erlangung von Fünf-Sterne-Lob zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Die Geschäftslogik besteht darin, dass ich zuerst alle Tags und Stile erstellen muss, die ich verwenden muss, und dann die entsprechenden Verhaltensweisen unserer Sterne, Punktzahlen, Smileys und Klicks schreiben und sie für eine einfache Wartung abstrahieren muss. Und nach dem Klicken lösen wir ein Ereignis aus, zeichnen den entsprechenden Namen, die Punktzahl und andere Informationen auf und speichern sie in einem Cookie. Während des Schreibvorgangs gibt es ein Positionsproblem, das leicht auftreten kann, wenn appendChild ausgeführt wird, ohne es zu erstellen. Das zweite Problem besteht darin, die Position von Sternen und Smileys beim Hinzufügen von Verhaltensweisen anzupassen.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<Skripttyp="Modul">
importiere Star aus "./js/Star.js";
let list=["Produktkonformität","Shop-Service-Einstellung","Express-Liefergeschwindigkeit","Kurierdienst","Express-Verpackung"]
Liste.fürJeden(Element => {
lass Stern = neuer Stern(Artikel);
Stern.appendTo("body");
star.addEventListener("ändern",changeHandler);
});
Funktion changeHandler(e){
var date = neues Datum();
Datum.Monat festlegen(11);
setzeCookie(e.scoreList,date);
Funktion setCookie(Daten,Datum){ //Im Cookie im JSON-Format speichern var str=date===undefined ? "" : ";expires="+date.toUTCString();
für(var prop in data){
var Wert=Daten[Eigenschaft];
wenn (Typ des Wertes == = "Objekt" und Wert! == null) Wert = JSON.stringify (Wert);
Dokument.cookie=prop+"="+Wert+str;
}
}
}
</Skript>
</body>
</html>
exportiere Standardklasse Component{ //Warp- und AppendTo-Methoden erstellen elem;
Konstruktor(){
dies.elem = dies.createElem();
}
Element erstellen(){
wenn(dieses.elem) dieses.elem zurückgeben;
let div = document.createElement("div");
div zurückgeben;
}
anhängenAn(übergeordnet){
wenn (Typ des übergeordneten Elements == = "Zeichenfolge") übergeordnetes Element = Dokument.Abfrageselektor (übergeordnetes Element);
übergeordnetes Element.AnhängenKind(dieses.Element);
}
}
Komponente aus "./Component.js" importieren;
exportiere Standardklasse Star erweitert Komponente{
Bezeichnung="";
Punktzahl;
Gesicht;
SternCon;
statischer STAR_NUM = 5;
SternArr=[];
statische StarScoreList = [];
Position = -1;
Konstruktor(_label){
super();
dies.label=_label;
Objekt.zuweisen(this.elem.style,{
Breite: "auto",
Höhe: "16px",
float:"links",
paddingBottom:"10px",
marginRight:"20px",
paddingTop:"16px",
})
Star.StarScoreList[_label]=0;
dies.createLable(_label);
dies.createStar();
dies.createScore();
}
Label erstellen(_label){
let labels = document.createElement("div");
Beschriftungen.Textinhalt=_Beschriftung;
Objekt.zuweisen(Beschriftungen.Stil,{
float:"links",
Höhe: "16px",
Zeilenhöhe: "16px",
marginRight: "10px",
Überlauf: "versteckt",
whiteSpace: "nowrap",
textOverflow: "Auslassungspunkte",
Schriftart: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
Farbe: "#666"
});
dies.elem.appendChild(Beschriftungen);
}
Stern erstellen(){
dies.starCon=document.createElement("div");
Objekt.zuweisen(this.starCon.style,{
float:"links",
Höhe: "16px",
Position: „relativ“,
Rand oben: „1px“
})
für (let i=0;i<Star.STAR_NUM;i++){
let star = document.createElement("div");
Objekt.zuweisen(Stern.Stil,{
Hintergrundbild:"url(./img/commstar.png)",
Breite: "16px",
Höhe: "16px",
float:"links",
})
dies.starArr.push(Stern);
dies.starCon.appendChild(Stern);
}
Objekt.zuweisen(dieses.Gesicht.Stil,{
Breite: "16px",
Höhe: "16px",
Hintergrundbild:"url(./img/face-red.png)",
Position: „absolut“,
oben:"-16px",
Anzeige: „keine“
});
dies.starCon.appendChild(dieses.Gesicht);
dies.elem.appendChild(dieses.starCon);
this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e))
this.starCon.addEventListener("klicken",e=>this.mouseHandler(e))
this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e))
dieses.Gesicht=document.createElement("div");
}
erstelleScore(){
dies.score=document.createElement("span");
Objekt.zuweisen(this.score.style,{
Position: „relativ“,
Breite: "30px",
Höhe: "16px",
oben:"-2px",
marginLeft:"10px",
Zeilenhöhe: "16px",
textAlign:"rechts",
Farbe:"#999",
Schriftart: „12px/150 % tahoma, Arial, Microsoft YaHei, Hiragino Sans GB, serifenlos“,
});
this.score.textContent="0 Punkte";
dies.starCon.appendChild(dieses.score);
}
mouseHandler(e){ //Mausverhalten let index=this.starArr.indexOf(e.target);
Schalter(e.Typ){
Fall „Mouseover“:
wenn (Index < 0) zurückgeben;
dies.changeFace(index);
dies.changeScore(index+1);
dies.changeStar(index+1);
brechen;
Fall "Klick":
dies.pos=index;
dies.dispatch();
brechen;
Fall "Mausblatt":
dies.changeStar(diese.pos+1);
dies.changeFace(diese.pos);
dies.changeScore(diese.pos+1);
brechen;
Standard:
zurückkehren;
}
}
ändereStern(n){
für (lass i = 0; i <this.starArr.length; i++) {
wenn(i<n){
dies.starArr[i].style.backgroundPositionY="-16px";
}anders{
dies.starArr[i].style.backgroundPositionY="0px";
}
}
}
ändereScore(n){
this.score.textContent=n+"Punkte";
wenn(n===0){
dieser.Score.Stil.Farbe = "999";
}anders{
dieser.Score.Stil.color="#e4393c";
}
}
Gesicht ändern(n){
wenn(n<0){
dieses.Gesicht.Stil.Anzeige="keine";
zurückkehren;
}
let index=Star.STAR_NUM-n-1; //Das Smiley-Gesicht ist hier aufgrund des Bildes this.face.style.display="block"; umgekehrt.
dieses.Gesicht.Stil.HintergrundPositionX=-index*20+"px";
dieses.Gesicht.Stil.links=dieses.SternArr[n].OffsetLeft+"px";
}
ändereScore(n){
this.score.textContent=n+"Punkte";
wenn(n===0){
dieser.Score.Stil.Farbe = "999";
}anders{
dieser.Score.Stil.color="#e4393c";
}
}
versenden(){
// konsole.log("aaa")
Star.StarScoreList[dieses.label]=diese.pos+1;
var evt = neues Ereignis("Änderung");
evt.score=diese.pos+1;
evt.label=dieses.label;
evt.scoreList=Stern.StarScoreList;
dies.dispatchEvent(evt);
}
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.21
Artikel empfehlen
Detaillierte Erklärung zur Verwendung der Vue-Verifizierungscode-Komponente
In diesem Artikelbeispiel wird der spezifische Im...
MySQL 5.7.18 Installer Installation Download Grafik-Tutorial
Dieser Artikel enthält das ausführliche Installat...
Analyse von Multithread-Programmierbeispielen unter Linux
1 Einleitung Die Thread-Technologie wurde bereits...
10 wichtige Unterschiede zwischen HTML5 und HTML4
HTML5 ist die nächste Version des HTML-Standards....
Detaillierte Beschreibung der Verwendung der erweiterten Konfiguration von Firewalld unter Linux
IP-Masquerading und Port-Weiterleitung Firewalld ...
Fallzusammenfassung zur Vue-Komponentenkommunikationsmethode
Inhaltsverzeichnis 1. Übergeordnete Komponente üb...
CentOS 8-Installationsdiagramm (superdetailliertes Tutorial)
CentOS 8 ist offiziell veröffentlicht! CentOS ent...
MySQL Series 6-Benutzer und Autorisierung
Inhaltsverzeichnis Tutorial-Reihe 1. Benutzerverw...
vue.js Router verschachtelte Routen
Vorwort: Manchmal ist der Hauptteil einer Route d...
Vue Grundanleitung Beispiel grafische Erklärung
Inhaltsverzeichnis 1. v-on-Richtlinie 1. Grundleg...
React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen
Installieren Sie antd-mobile Globaler Import npm ...
HTML-Grundlagen HTML-Struktur
Was ist eine HTML-Datei? HTML steht für Hyper Text...
Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet
Die automatische Inkrementierung der Primärschlüs...
Bewertungsregeln von YSlow, einem von Yahoo entwickelten Webseiten-Bewertungs-Plugin
YSlow ist ein von Yahoo USA entwickeltes Plug-in ...
Eine detaillierte Erklärung der überlappenden und weichen Farbanpassungsmethode bei der Farbanpassung von Webseiten
In diesem Artikel gibt es keine Spitzfindigkeiten,...