JS實現五星好評案例
阿新 • • 發佈：2021-09-13
本文例項為大家分享了實現五星好評案例的具體程式碼，供大家參考，具體內容如下
業務邏輯是我需要先創建出所有我需要用到的標籤和樣式再寫出我們星星對應的行為，分數對應行為，笑臉對應行為，點選對應行為，抽象化出來，方便維護。並且在點選後我們丟擲事件，記錄下對應的name，分數等資訊，儲存在cookie中。
在編寫過程中，一個是位置問題，很容易出現在沒有建立就進行appendChild，第二個就是在新增行為時如何調整星星，笑臉的位置。
<!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=["商品符合度","店家服務態度","快遞配送速度","快遞員服務","快遞包裝"]
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){ //JSON形式儲存到cookie中
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{ //建立warp 和 appendTo方法
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 "./Cowww.cppcns.commponent.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,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",}) this.starArr.push(star); this.starCon.appendChild(star); } Object.assign(this.face.style,{ width:"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",top:"-2px",marginLeft:"10px",lineHeight:"16px",textAlign:"right",color:"#999",font:"12px/150% tahoma,sans-serif",}); this.score.textContent="0分"; this.starCon.appendChild(this.score); } mouseHandler(e){ //滑鼠行為 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].stwww.cppcns.comyle.backgroundPositionY="-16px"; }else{ this.starArr[i].style.backgroundPositionY="0px"; } } } changeScore(n){ this.score.textContent=n+"分"; 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; //這裡的笑臉因為圖片的原因是反向的 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+"分"; 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; ehttp://www.cppcns.comvt.scoreList=Star.StarScoreList; this.dispatchEvent(evt); } }
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。