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
Layui table selects the radio button of the specified row and scrolls to the implementation code of the row
The layui table has multiple rows of data. Throug...
How to handle the loss of parameters when refreshing the page when passing parameters to vue router
Table of contents Overview Method 1: Pass paramet...
Introduction to the difference between on and where conditions in MySQL left join operation
Priority The reason why placing the same conditio...
Usage and best practice guide for watch in Vue3
Table of contents Preface🌟 1. API Introduction 2....
MySql5.7.21 installation points record notes
The downloaded version is the Zip decompression v...
Solution to inconsistent display of cursor size in input box
The cursor size in the input box is inconsistent T...
React's transition from Class to Hooks
Table of contents ReactHooks Preface WhyHooks? Fo...
CentOS 6 Compile and install ZLMediaKit analysis
Install ZLMediaKit on centos6 The author of ZLMed...
The difference and introduction of ARGB, RGB and RGBA
ARGB is a color mode, which is the RGB color mode...
14 techniques for high-performance websites
Original : http://developer.yahoo.com/performance...
Vue3 (V) Details of integrating HTTP library axios
Table of contents 1. Install axios 2. Use of axio...
7 interesting ways to achieve hidden elements in CSS
Preface The similarities and differences between ...
Meta viewport makes the web page full screen display control on iPhone
In desperation, I suddenly thought, how is the Sin...
How to make an input text box change length according to its content
First: Copy code The code is as follows: <input...
CSS sets Overflow to hide the scroll bar while allowing scrolling
CSS sets Overflow to hide the scroll bar while al...