五星好评利用cookie传递数据
电商系统五星好评组件利用js实现
- 五星好评的结构
- 五星好评的功能介绍
- html页面代码
- js代码
- js代码中引入了一个创建对象常用的自定义类(非重点关注)
- 星星组件js代码
- 演示效果
五星好评的结构
大致分为四大块，客户对什么方面评价，评价的分数，评价的星级，以及评价的心情表情
五星好评的功能介绍
1.当我们链接到电商的评论系统页面时，就会打开五星好评的界面，鼠标在上面移动时，客户评价的星星就会随着鼠标的改变而改变，当我们点击某刻星星时，该星星就会锁定，鼠标离开星星不会消失
2.鼠标滑动的星星上方会出现对应的心情表情这个表情会定位到对应的星级正上方， 会随着鼠标的位置改变而改变，鼠标划出星星，表情会自动消失
3.在星级评价的后面就是评分，我们刚进入页面时，评分默认显示0分，鼠标经过时，随着鼠标在星星上滑动时，分数随着鼠标的位置变化而变化，分数对应着星星的颗数，鼠标点击星星时，分数锁定，鼠标离开分数不会消失
4.当我们再次点击进入页面时，页面还是显示上一次的客户评价，利用cookie存储
html页面代码
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>.div{font-style: normal;}style>
head>
<body><script type="module">import Star from "./js/Star.js";//引入五星好评的组件let list = ["饭菜质量","商家服务","外卖速度速度","骑手态度"];//需要评价的内容for(var i=0;i<list.length;i++){let star = new Star(list[i],12);//创建星星，后面的12是 用cookie时传入的datestar.appendTo("body");//星星添加到bodystar.addEventListener("change",(e)=>{console.log(e.starList);//接受点击的抛发事件，输出当前点击的评价内容和分数组成});}script>
body>
html>
js代码
js代码中引入了一个创建对象常用的自定义类(非重点关注)
export default class Component extends EventTarget{elem;constructor(){super();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);}
}
星星组件js代码
import Component from "./Component.js";//引入创建元素组件
export default class Star extends Component{label="";//存放内容starTu;//存放星星starArr=[];//存放星星个数的数组pos=-1;//用来判定星星和分数score;//分数face;//表情date;//cookie时间str="";list={};//存放cookie数据的对象static NUM=5;//星星个数static starList={};//用来存放要抛发数据的对象constructor(_label,_date){//传入评价内容,和cookie时间super();this.date=_date;this.label= _label;Object.assign(this.elem.style,{height: "16px",position: "relative",top:"150px",})Star.starList[_label]=0;//默认0分this.createLabel(_label);this.createStar();this.createScore();this.list=this.getCookie();//得到存放的cookie数据//当cookie清空时,再次进入页面 显示undefined 我们需要判断cookie是否存在if(this.list[this.label]){this.changeStar(this.list[_label]-1);this.changeScore(this.list[_label]);}else{//没有就恢复默认this.changeStar(-1);this.changeScore(0);}}//创建评价内容的样式createLabel(_label){let labels=document.createElement("em");labels.textContent=_label;Object.assign(labels.style,{float:"left",display:"block",height: "16px",lineHeight: "16px",margin: "0 10px 0 60px",whiteSpace: "nowrap",textOverflow: "ellipsis",color: "#666",fontSize:"12px",fontStyle:"normal"});this.elem.appendChild(labels);}//创建星星的样式createStar(){this.starTu=document.createElement("div");Object.assign(this.starTu.style,{float:"left",height:"16px",position:"relative",marginTop:"1px",})for(let i=0;i<Star.NUM;i++){let star = document.createElement("div");Object.assign(star.style,{width:"16px",height:"16px",float:"left",backgroundImage:"url(./img/commstar.png)",})this.starArr.push(star);this.starTu.appendChild(star);}//添加滑动和点击的事件this.starTu.addEventListener("mouseover",e=>this.mouseHandler(e));this.starTu.addEventListener("click",e=>this.mouseHandler(e));this.starTu.addEventListener("mouseleave",e=>this.mouseHandler(e));this.createFace();this.elem.appendChild(this.starTu);}//改变星星的位置changeStar(index){for( var i=0;i<this.starArr.length;i++){if(i<=index||i<this.pos) this.starArr[i].style.backgroundPositionY="-16px";else this.starArr[i].style.backgroundPositionY="0px";}}//创建分数的样式createScore(n){this.score=document.createElement("span");Object.assign(this.score.style,{width: "30px",height: "16px",color: "#666",fontSize:"12px",position: "relative",left:"10px", bottom:"3px"})this.score.textContent="0分";this.elem.appendChild(this.score);}//改变分数changeScore(n){this.score.textContent=n+"分";if(n===0)this.score.style.color="#666";else this.score.style.color="#e4393c";}//创建表情createFace(){this.face=document.createElement("div");Object.assign(this.face.style,{width:"16px",height:"16px",backgroundImage:"url(./img/face-red.png)",position:"absolute",top:"-16px",display:"none"})this.starTu.appendChild(this.face);}//改变表情changeFace(n){if(n<0){this.face.style.display="none";return;}var index = 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";}//鼠标事件mouseHandler(e){switch(e.type){case "click":case "mouseover":let index = this.starArr.indexOf(e.target);if(index===-1) return;if(e.type==="click"){this.pos=index;this.starpatch();}else{this.changeScore(index+1);this.changeFace(index);}this.changeStar(index);break;case "mouseleave":this.changeStar(this.pos);this.changeScore(this.pos+1);this.changeFace(-1);break;}}starpatch(){Star.starList[this.label]=this.pos+1;var evt=new Event("change");evt.score=this.pos+1;evt.label=this.label;evt.starList=Star.starList;// console.log(evt.starList);this.dispatchEvent(evt);var date= new Date();date.setMonth(this.date);this.setCookie(this.pos+1,date);}setCookie(data,date){this.str=date===undefined ? "" : ";expires="+date.toUTCString();document.cookie=this.label+"="+data+this.str;}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;},{}) }
}
演示效果
默认效果
点击就会输出
鼠标滑动有表情出现
cookie保存
刷新页面 还是上次的位置
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！