JS+cookie实现购物评价五星好评功能

这篇文章主要为大家详细介绍了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技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程