JS實(shí)現(xiàn)五星好評(píng)案例
本文實(shí)例為大家分享了JS實(shí)現(xiàn)五星好評(píng)案例的具體代碼,供大家參考,具體內(nèi)容如下
業(yè)務(wù)邏輯是我需要先創(chuàng)建出所有我需要用到的標(biāo)簽和樣式再寫出我們星星對(duì)應(yīng)的行為,分?jǐn)?shù)對(duì)應(yīng)行為,笑臉對(duì)應(yīng)行為,點(diǎn)擊對(duì)應(yīng)行為,抽象化出來,方便維護(hù)。并且在點(diǎn)擊后我們拋出事件,記錄下對(duì)應(yīng)的name,分?jǐn)?shù)等信息,保存在cookie中。
在編寫過程中,一個(gè)是位置問題,很容易出現(xiàn)在沒有創(chuàng)建就進(jìn)行appendChild,第二個(gè)就是在添加行為時(shí)如何調(diào)整星星,笑臉的位置。
<!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=["商品符合度","店家服務(wù)態(tài)度","快遞配送速度","快遞員服務(wù)","快遞包裝"] 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形式存儲(chǔ)到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{ //創(chuàng)建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 "./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分"; this.starCon.appendChild(this.score); } mouseHandler(e){ //鼠標(biāo)行為 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+"分"; 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; //這里的笑臉因?yàn)閳D片的原因是反向的 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; evt.scoreList=Star.StarScoreList; this.dispatchEvent(evt); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法,由于遇到相關(guān)序列化的問題,但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制,導(dǎo)致不能用$.param來序列化參數(shù),下面小編給大家分享了實(shí)例代碼,需要的朋友參考下吧2018-08-08JavaScript中的for循環(huán)與雙重for循環(huán)詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中for循環(huán)與雙重for循環(huán)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03mpvue微信小程序多列選擇器用法之省份城市選擇的實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于mpvue微信小程序多列選擇器用法之省份城市選擇實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Bootstrap基本組件學(xué)習(xí)筆記之按鈕組(8)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之按鈕組,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12基于JavaScript實(shí)現(xiàn)輪播圖代碼
在前端程序開發(fā)中,經(jīng)常會(huì)實(shí)現(xiàn)js輪播圖的效果,怎么實(shí)現(xiàn)的呢?下面小編給大家分享基于基于JavaScript實(shí)現(xiàn)輪播圖代碼 ,非常不錯(cuò),感興趣的朋友可以參考下2016-07-07JavaScript XML和string相互轉(zhuǎn)化實(shí)現(xiàn)代碼
兩個(gè)小function實(shí)現(xiàn)XML和string相互轉(zhuǎn)化,需要的朋友可以參考下。2011-07-07JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09