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
Lösung zum Finden aller untergeordneten Zeilen für eine bestimmte übergeordnete Zeile in MySQL
Vorwort Hinweis: Die Testdatenbankversion ist MyS...
Erste Schritte mit TS (TypeScript) im Vue-Projekt
Inhaltsverzeichnis 1. Einführung in Typescript 2....
Eine kurze Erläuterung der Rolle und Funktionsweise von Schlüsseln in Vue3
Welche Funktion hat dieses Schlüsselattribut? Sch...
So installieren Sie Android x86 in einer virtuellen VMware-Maschine
Manchmal möchten Sie eine App testen, aber nicht ...
So deinstallieren Sie Node und NPM vollständig auf dem Mac
npm deinstallieren sudo npm deinstallieren npm -g...
So installieren Sie ElasticSearch auf Docker in einem Artikel
Inhaltsverzeichnis Vorwort 1. Docker installieren...
JavaScript implementiert kreisförmiges Karussell
In diesem Artikel wird der spezifische JavaScript...
Docker verwendet Busybox, um ein Basis-Image zu erstellen
Die erste Zeile eines Docker-Images beginnt mit e...
Bedeutung und Berechnungsmethode von QPS und TPS der MySQL-Datenbank
Bei DB-Benchmarktests sind QPS und TPS wichtige I...
XHTML-Tags haben ein schließendes Tag
<br />Ursprünglicher Link: http://www.dudo.o...
Nginx-Lastausgleichsalgorithmus und Failover-Analyse
Überblick Der Lastenausgleich von Nginx bietet Up...
Eine kurze Analyse der grundlegenden Implementierung von Vue-Erkennungsdatenänderungen
Inhaltsverzeichnis 1. Objektänderungserkennung 2....
18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie
Designer müssen Psychologie verstehen, indem sie ...
Detaillierte Schritte zur Installation des 64-Bit-Ubuntu-Systems und des Docker-Tools auf Raspberry Pi 3B+
Wenn Sie einige 64-Bit-Anwendungen (wie 64-Bit-JD...
jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation
Ich habe eine Navigationsleiste mit einem erweite...