JS achieves five-star praise case
|
This article shares the specific code of JS to achieve five-star praise for your reference. The specific content is as follows The business logic is that I need to first create all the tags and styles I need to use, and then write the corresponding behaviors of our stars, scores, smiley faces, and clicks, abstract them for easy maintenance. And after clicking, we throw an event, record the corresponding name, score and other information, and save it in a cookie. During the writing process, one is the position problem, which is easy to appear when appendChild is performed without creating it. The second is how to adjust the position of stars and smiley faces when adding behaviors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import Star from "./js/Star.js";
let list=["Product Conformity","Shop Service Attitude","Express Delivery Speed","Courier Service","Express Packaging"]
list.forEach(item => {
let star = new Star(item);
star.appendTo("body");
star.addEventListener("change",changeHandler);
});
function changeHandler(e){
var date = new Date();
date.setMonth(11);
setCookie(e.scoreList,date);
function setCookie(data,date){ //Store in cookie in JSON format var str=date===undefined ? "" : ";expires="+date.toUTCString();
for(var prop in data){
var value=data[prop];
if(typeof value==="object" && value!==null) value=JSON.stringify(value);
document.cookie=prop+"="+value+str;
}
}
}
</script>
</body>
</html>
export default class Component{ //Create warp and appendTo methods elem;
constructor(){
this.elem = this.createElem();
}
createElem(){
if(this.elem) return this.elem;
let div = document.createElement("div");
return div;
}
appendTo(parent){
if(typeof parent==="string")parent=document.querySelector(parent);
parent.appendChild(this.elem);
}
}
import Component from "./Component.js";
export default class Star extends Component{
label="";
score;
face;
starCon;
static STAR_NUM = 5;
starArr=[];
static StarScoreList = [];
pos=-1;
constructor(_label){
super();
this.label=_label;
Object.assign(this.elem.style,{
width:"auto",
height:"16px",
float:"left",
paddingBottom:"10px",
marginRight:"20px",
paddingTop:"16px",
})
Star.StarScoreList[_label]=0;
this.createLable(_label);
this.createStar();
this.createScore();
}
createLable(_label){
let labels = document.createElement("div");
labels.textContent=_label;
Object.assign(labels.style,{
float:"left",
height: "16px",
lineHeight: "16px",
marginRight: "10px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
color: "#666"
});
this.elem.appendChild(labels);
}
createStar(){
this.starCon=document.createElement("div");
Object.assign(this.starCon.style,{
float:"left",
height:"16px",
position:"relative",
marginTop:"1px"
})
for(let i=0;i<Star.STAR_NUM;i++){
let star = document.createElement("div");
Object.assign(star.style,{
backgroundImage:"url(./img/commstar.png)",
width:"16px",
height:"16px",
float:"left",
})
this.starArr.push(star);
this.starCon.appendChild(star);
}
Object.assign(this.face.style,{
width:"16px",
height:"16px",
backgroundImage:"url(./img/face-red.png)",
position:"absolute",
top:"-16px",
display:"none"
});
this.starCon.appendChild(this.face);
this.elem.appendChild(this.starCon);
this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e))
this.starCon.addEventListener("click",e=>this.mouseHandler(e))
this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e))
this.face=document.createElement("div");
}
createScore(){
this.score=document.createElement("span");
Object.assign(this.score.style,{
position:"relative",
width:"30px",
height:"16px",
top:"-2px",
marginLeft:"10px",
lineHeight:"16px",
textAlign:"right",
color:"#999",
font:"12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,sans-serif",
});
this.score.textContent="0 points";
this.starCon.appendChild(this.score);
}
mouseHandler(e){ //Mouse behavior let index=this.starArr.indexOf(e.target);
switch(e.type){
case "mouseover":
if(index<0) return;
this.changeFace(index);
this.changeScore(index+1);
this.changeStar(index+1);
break;
case "click":
this.pos=index;
this.dispatch();
break;
case "mouseleave":
this.changeStar(this.pos+1);
this.changeFace(this.pos);
this.changeScore(this.pos+1);
break;
default:
return;
}
}
changeStar(n){
for(let i=0;i<this.starArr.length;i++){
if(i<n){
this.starArr[i].style.backgroundPositionY="-16px";
}else{
this.starArr[i].style.backgroundPositionY="0px";
}
}
}
changeScore(n){
this.score.textContent=n+"points";
if(n===0){
this.score.style.color="#999";
}else{
this.score.style.color="#e4393c";
}
}
changeFace(n){
if(n<0){
this.face.style.display="none";
return;
}
let index=Star.STAR_NUM-n-1; //The smiley face here is reversed because of the picture this.face.style.display="block";
this.face.style.backgroundPositionX=-index*20+"px";
this.face.style.left=this.starArr[n].offsetLeft+"px";
}
changeScore(n){
this.score.textContent=n+"points";
if(n===0){
this.score.style.color="#999";
}else{
this.score.style.color="#e4393c";
}
}
dispatch(){
// console.log("aaa")
Star.StarScoreList[this.label]=this.pos+1;
var evt = new Event("change");
evt.score=this.pos+1;
evt.label=this.label;
evt.scoreList=Star.StarScoreList;
this.dispatchEvent(evt);
}
}The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySQL 8.0.21 installation and configuration method graphic tutorial
>>: Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse
Recommend
Detailed explanation of the role of the default database after MySQL installation
When you learn MySQL, you will find that it comes...
The browser caches the relevant http headers to minimize the number of http requests
I recently read Yahoo's 34 Golden Rules and le...
Analysis and application of irregular picture waterfall flow principle
The layout problem of irregular picture walls enc...
How to use crontab to add scheduled tasks in Linux
Preface The Linux system is controlled by the sys...
Comparison of storage engines supported by MySQL database
Table of contents Storage Engine Storage engines ...
How to use JS to check if an element is within the viewport
Preface Share two methods to monitor whether an e...
Detailed process of installing logstash in Docker
Edit docker-compose.yml and add the following con...
Detailed explanation of compatibility issues and solutions for setting max-width and min-width in table
Setting min-width and max-width properties in tab...
Teach you how to use MySQL8 recursive method
I have previously written an article about recurs...
How to use fdisk to partition disk in Linux
Commonly used commands for Linux partitions: fdis...
Detailed explanation of the basic commands of Docker run process and image
Table of contents 1. Run workflow 2. Basic comman...
javascript:void(0) meaning and usage examples
Introduction to void keyword First of all, the vo...
A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing
This article mainly introduces several scheduling...
In-depth understanding of MySQL slow query log
Table of contents What is the slow query log? How...
MySQL GROUP_CONCAT limitation solution
effect: The GROUP_CONCAT function can concatenate...