这篇文章主要为大家详细介绍了JS+cookie实现购物评价五星好评功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS+cookie实现购物评价五星好评功能的具体代码,供大家参考,具体内容如下
案例实现的是购物评价中五星点评功能.
通过JS面向对象方法实现
利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果.
具体html,js代码如下:
Document
JS代码部分:
import Component from './Component.js'; export default class Starr extends Component{ labelCon; starCon; startArr=[]; score; face; prv; index; static EVERYSCORE={}; static STARTNUM=5; constructor(_label){ super(); this.label=_label; Object.assign(this.elem.style,{ width: "auto", float: "left", height: "16px", paddingBottom: "10px", marginRight: "20px", paddingTop:"16px" }); Starr.EVERYSCORE[_label]=0; this.creatLabel(_label); this.creatStartCon(); this.creatScore(); this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e)); this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e)); this.starCon.addEventListener("click",e=>this.mouseHandler(e)); // this.elem.addEventListener("change",e=>this.changeHandler(e)); } //创建label容器 creatLabel(label){ this.labelCon=document.createElement("span"); Object.assign(this.labelCon.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.labelCon.textContent=label; this.elem.appendChild(this.labelCon); } //创建星星和笑脸的容器 starCon creatStartCon(){ this.starCon=document.createElement("div"); Object.assign(this.starCon.style,{ float:"left", height:"16px", position:"relative", marginTop:"1px" }); for(var i=0;iindex){ this.changestar(this.prv); }else{ this.changestar(index); } //离开时 }else if(e.type==="mouseleave"){ this.face.style.display="none"; if(this.prv>=0){ this.changestar(this.prv); this.changeScore(this.prv); this.changeFace(this.prv); }else{ this.changestar(-1); this.changeScore(-1); this.changeFace(0); } //点击时 }else if(e.type==="click"){ let index=this.startArr.indexOf(e.target); this.prv=index; this.changestar(this.prv); this.changeScore(this.prv); this.changeFace(this.prv); this.getCookie(this.prv+1); Starr.EVERYSCORE[this.label]=index+1; } } //改变星星颜色方法 changestar(index){ for(var i=0;i
最终实现效果: 下次打开仍会显示该点评效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
以上就是JS+cookie实现购物评价五星好评功能的详细内容,更多请关注0133技术站其它相关文章!