利用cookie做五星好评
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 20px;
}
</style>
</head>
<body>
<script>
/*
思路:
1、创建好DOM结构,包括评价名称,星星和笑脸,评分
2、需要添加的事件:点击星星常亮,分数也固定;鼠标滑动时星星,笑脸,分数相应改变;离开时,笑脸消失,点击了的星星和相应分数不变
3、分离的功能:1.星星点亮,2、分数改变,3、改变笑脸,4、抛发点击的评价名称和相应评分
*/
</script>
<script type="module">
import Star from "./js/Star.js"
var date=new Date();
date.setFullYear(2025);
let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"];
var obj=getCookie();
list.forEach(function(item){
for(var prop in obj){
var pos;
// console.log(prop,item);
if(item === prop) pos=obj[prop];
else continue;
}
// console.log(pos);
let stars=new Star(item,pos);
stars.appendTo("body");
stars.addEventListener("change",changeHandler)
})
function changeHandler(e){
setCookie(e.data,date);
}
function setCookie(data,date){
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;
}
}
function getCookie(){
if(document.cookie.length===0) return {}
return document.cookie.split(";").reduce((value,item)=>{
var arr=item.split("=");
var v=arr[1].trim();
try{
v=JSON.parse(v);
}catch(e){
}
value[arr[0].trim()]=v;
return value;
},{})
}
</script>
</body>
</html>
JS文件
export default class Star extends EventTarget{
label;
elem;
static STARNUM=5;
starList=[];
index;
number;
face;
pos;
static DATA={};
constructor(_label,_pos=-1){
super();
this.pos=_pos;
this.label=_label;
this.elem=this.createElem();
this.createLabel();
this.createStar();
// this.createFace();
this.createNum();
}
appendTo(parent){
if(typeof parent === "string") parent=document.querySelector(parent);
parent.appendChild(this.elem);
}
createElem(){
let div=document.createElement("div");
Object.assign(div.style,{
height:"16px",
float:"left",
padding:"10px 0",
marginRight:"20px",
position:"relative",
});
return div;
}
createLabel(){
let div=document.createElement("div");
div.textContent=this.label+" :";
Object.assign(div.style,{
float:"left",
height:"16px",
lineHeight:"16px",
font:'12px tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋体, sans-serif',
marginRight: "10px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
color: "rgb(102, 102, 102)",
});
this.elem.appendChild(div);
}
createStar(){
let div=document.createElement("div");
Object.assign(div.style,{
float:'left',
// overflow:"hidden",
position:"relative",
})
let parent=document.createDocumentFragment();
for(let i=0;i<Star.STARNUM;i++){
let star=document.createElement("div");
Object.assign(star.style,{
height:"16px",
width:"16px",
float:"left",
background:"url(./img/star.png) 0 0",
});
this.starList.push(star);
parent.appendChild(star);
}
div.addEventListener("mouseover",e=>this.mouseHandler(e))
div.addEventListener("mouseout",e=>this.mouseHandler(e))
div.addEventListener("click",e=>this.mouseHandler(e))
this.createFace(div);
div.appendChild(parent);
this.elem.appendChild(div);
this.changeStar(this.pos);
}
createFace(div){
this.face=document.createElement("div");
Object.assign(this.face.style,{
position:"absolute",
background:"url(./img/face.png) ",
height:"16px",
width:"16px",
top:"-16px",
display:"none",
})
div.appendChild(this.face);
}
createNum(){
this.number=document.createElement("div");
this.number.textContent="0分";
Object.assign(this.number.style,{
float:"left",
position: "relative",
width: "30px",
height: "16px",
top: -"2px",
marginLeft: "10px",
font: '12px / 150% tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋体, sans-serif',
textAlign: "right",
color: "#666",
})
this.elem.appendChild(this.number);
this.changeNum(this.pos);
}
mouseHandler(e){
if(e.type==="mouseover"){
this.index=this.starList.indexOf(e.target);
this.changeStar(this.index);
this.changeNum(this.index);
this.changeFace(this.index);
}else if(e.type==="click"){
this.pos=this.index;
this.changeStar(this.index);
this.changeNum(this.index);
this.dispatch();
}else if(e.type==="mouseout"){
this.changeStar(this.pos-1);
this.changeNum(this.pos);
this.changeFace(-1);
}
}
changeStar(n){
// console.log(this.pos);
// console.log(this.index);
this.starList.forEach((item,index)=>{
if(index<=n || index<=this.pos) item.style.backgroundPositionY="16px";
else item.style.backgroundPositionY="0px";
})
}
changeNum(n){
n=n+1;
if(n>0){
this.number.textContent=n+"分";
this.number.style.color="#e4393c";
}else{
this.number.textContent=n+"分";
this.number.style.color="#666";
}
}
changeFace(n){
if(n>-1){
n=Star.STARNUM-this.index-1;
Object.assign(this.face.style,{
display:"block",
right:n*16+"px",
backgroundPositionX:-n*20+"px",
})
}
else this.face.style.display="none";
}
dispatch(){
Star.DATA[this.label]=this.pos;
let evt=new Event("change");
evt.data=Star.DATA;
this.dispatchEvent(evt);
}
}