用cookie实现五星好评的有记录

用cookie实现五星好评的有记录

.五星好评.html

import Component from “./Component.js”;
export default class Star extends Component{
label="";
starCon;
face;
score;
pos=-1;
starArr=[];
obj={};
static STAR_NUM=5;
static StarScoreList={};
//评价题目调用时传入的参数
constructor(_lable,_obj){
super();
this.lable=_lable;
this.obj=_obj;
console.log(this.obj);
Object.assign(this.elem.style,{
width:“auto”,
float:“left”,
height:“16px”,
paddingBottom:“10px”,
marginRight:“20px”,
paddingTop:“16px”
});
//把label当作key,value=0传入
Star.StarScoreList[_lable]=0;
this.createLable(_lable);
this.createStar();
this.creatScore();
this.changeCookie(this.obj);
}
//根据cookie变化，改变样式
changeCookie(obj){
for(var prop in obj){
if(prop=this.lable) this.pos=this.obj[prop]-1;
}
this.changeStar(this.pos);
this.changeScore(this.pos+1)
}
//创建span存放label元素
createLable(_lable){
let lables=document.createElement(“span”);
lables.textContent=_lable;
Object.assign(lables.style,{
float:“left”,
height:“16px”,
lineHeight:“16px”,
marginRight:‘10px’,
overflow:‘hidden’,
whitSpace:‘nowrap’,
textOverflow: “ellipsis”,
font: ‘12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif’,
color: “#666”
});
this.elem.appendChild(lables);
}
//创建存放所有星星的div
createStar(){
this.starCon=document.createElement(“div”);
Object.assign(this.starCon.style,{
float:“left”,
height:“16px”,
position:“relative”,
marginTop:“1px”
});
// 创建5个星星
for(let i=0;i<Star.STAR_NUM;i++){
let star =document.createElement(“div”);
Object.assign(star.style,{
width:“16px”,
height:“16px”,
float:“left”,
backgroundImage:“url(./img/commstar.png)”,
})
// 把创建的星星div存放到星星数组
this.starArr.push(star);
// 把创建的星星插入星星容器
this.starCon.appendChild(star);
}
//创建鼠标移入移出点击星星事件，用星星容器监听
this.starCon.addEventListener(“mouseover”,e=>this.mouseHandler(e));
this.starCon.addEventListener(“click”,e=>this.mouseHandler(e));
this.starCon.addEventListener(“mouseleave”,e=>this.mouseHandler(e));
//创建存放笑脸的div
this.face=document.createElement(“div”);
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);
}
creatScore(){
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,"\u5b8b\u4f53",sans-serif’,
});
this.score.textContent=“0分”;
this.elem.appendChild(this.score);
}
mouseHandler(e){
let index;
switch(e.type){
case “click”:
// 检索星星数组中点击星星的下标
index=this.starArr.indexOf(e.target);
//没找到就跳出
if(index<0) return;
//从index（含）下标以前的都点亮
this.pos=index;
//抛发事件
this.dispatch();
this.changeStar(index);
break;
case “mouseover”:
// 检索星星数组中点击星星的下标
index=this.starArr.indexOf(e.target);
//没找到就跳出
if(index<0) return;
//经过星星的时候分数变化，分数从1开始，所以要加1
this.changeScore(index+1);
this.changeFace(index);
this.changeStar(index);
break;
case “mouseleave”:
this.changeStar(this.pos);
this.changeScore(this.pos+1);
this.changeFace(-1);
break;
}
}
changeStar(n){
// 遍历所有星星
for(var i=0;i<this.starArr.length;i++){
// 如果i<传入的数，或者小于正在亮的星星，就亮起来,否则就不亮
//点击的时候已经把正在亮的pos改成了被点击的下标
//所以点击的时候n=pos
if(i<=n || i<=this.pos){
this.starArr[i].style.backgroundPositionY="-16px";
}else{
this.starArr[i].style.backgroundPositionY=“0px”;
}
}
}
changeFace(n){
if(n<0){
this.face.style.display=“none”;
return;
}
//因为笑脸的图和分数相反
var index=Star.STAR_NUM-n-1;
this.face.style.display=“block”;
this.face.style.backgroundPositionX=-index*20+“px”;
//显示在对应星星的上边
console.log(this.starArr[n]);
this.face.style.left=this.starArr[n].offsetLeft+“px”;
}
changeScore(n){
this.score.textContent=n+“分”;
if(n=0) this.score.style.color="#999";
else this.score.style.color="#e4393c";
}
//抛发事件
dispatch(){
Star.StarScoreList[this.lable]=this.pos+1;
var evt=new Event(“change”);
evt.score=this.pos+1;
evt.lable=this.lable;
evt.scoreList=Star.StarScoreList;
this.dispatchEvent(evt);
}

}