这篇文章给大家分享的是有关JS如何实现五星好评效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
用JS实现面向对象方法实现京东的五星好评效果。
鼠标滑过时的显示:
当评价完成后,关闭浏览器重新打开页面,还是上次的评价结果。用cookie实现。
具体实现如下:
import Componenet from "./Component.js"; export default class Stars extends Componenet { label; STARS_NUM = 5; starArr = []; score = 0; starsCon; faceIcon; scoreCon; index = -1; name; static STARS_LIST={}; //存储当前页面中所有的五星评价结果,一个商品为一组。用商品的id作为key,用商品评价组成一个数组,作为value。 date=new Date(); constructor(_label,_name) { super("div"); this.name=_name; this.label = _label; Object.assign(this.elem.style, { width:"200px", height: "16px", float: "left", marginRight: "20px", marginBottom: "10px", fontSize: "12px", color: "#666", lineHeight: "16px", userSelect: "none", position: "relative", top: "20px", left: "20px", }) // 解析cookie中存储的评论结果并在创建每个评论时初始化score的值。 this.initScore(); // 创建评价标签部分 this.createLabel(); // 创建星星部分 this.createStars(); // 创建分数部分 this.createScore(); // 初始化星星样式。 this.changeStarStyle(this.score-1); // 初始化分数 this.changeScore(this.score); // 添加鼠标滑过点击事件。 this.starsCon.addEventListener("mouseenter", e => this.mouseHandler(e)); this.starsCon.addEventListener("mouseleave", e => this.mouseHandler(e)); this.starsCon.addEventListener("mouseover", e => this.mouseHandler(e)); this.starsCon.addEventListener("click", e => this.clickHandler(e)); this.date.setFullYear(2021); } appendTo(_parent){ super.appendTo(_parent); if(!Stars.STARS_LIST[this.name]) Stars.STARS_LIST[this.name]=[]; Stars.STARS_LIST[this.name].push(this.label+"="+this.score); } clickHandler(e){ if(e.target.constructor!==HTMLLIElement) return this.index = this.starArr.indexOf(e.target); this.score = this.index+1; this.changeStarStyle(this.index); this.changeScore(this.index+1); // 每次点击都将评论的结果存储到cookie中,以便下次打开页面时读取。STARS_LIST中存储的是label作为key,score作为value的数据。 this.storageScore(); } storageScore(){ for(let prop in Stars.STARS_LIST){ if(prop === this.name){ Stars.STARS_LIST[prop].forEach((item,index)=>{ if(item.includes(this.label)) Stars.STARS_LIST[prop][index] = this.label+"="+this.score; }); } } document.cookie="comment="+ JSON.stringify(Stars.STARS_LIST)+";expires="+this.date.toUTCString(); } mouseHandler(e) { switch (e.type) { case "mouseenter": this.faceIcon.style.display = "block"; break; case "mouseleave": this.faceIcon.style.display = "none"; this.changeStarStyle(this.index); this.changeScore(this.score); break; case "mouseover": let index = this.starArr.indexOf(e.target); this.changeStarStyle(index); this.changeScore(index + 1); this.changeFaceStyle(index); break; } } changeStarStyle(_i) { for (let n = 0; n < this.starArr.length; n++) { if (n <= _i || n < this.score) { this.starArr[n].style.backgroundPositionY = "-16px"; } else { this.starArr[n].style.backgroundPositionY = "0px"; } } } changeFaceStyle(_i) { this.faceIcon.style.left = _i * 16 + "px"; this.faceIcon.style.backgroundPositionX = (_i + 1) * 20 + "px"; } changeScore(_i) { this.scoreCon.textContent = _i + "分"; } createLabel() { let label = document.createElement("span"); Object.assign(label.style, { float: "left", padding: "0 5px", }) label.textContent = this.label; this.elem.appendChild(label); } createStars() { this.starsCon = document.createElement("ul"); Object.assign(this.starsCon.style, { margin: 0, padding: 0, listStyle: "none", width: "80px", height: "16px", float: "left", position: "relative", }) for (let i = 0; i < this.STARS_NUM; i++) { let li = document.createElement("li"); Object.assign(li.style, { width: "16px", height: "16px", float: "left", backgroundImage: "url(./star_img/commstar.png)", }) this.starArr.push(li); this.starsCon.appendChild(li); } this.faceIcon = document.createElement("div"); Object.assign(this.faceIcon.style, { width: "16px", height: "16px", backgroundImage: "url(./star_img/face-red.png)", backgroundPositionX: "-80px", position: "absolute", left: "0", top: "-16px", display: "none", }) this.starsCon.appendChild(this.faceIcon); this.elem.appendChild(this.starsCon); } createScore() { this.scoreCon = document.createElement("div"); Object.assign(this.scoreCon.style, { height: "16px", width:"20px", float: "left", padding: "0 5px", }) this.scoreCon.textContent = this.score + "分", this.elem.appendChild(this.scoreCon); } initScore(){ // 直接读取cookie显示如下 // comment={"1001":["商品符合度=5","店家服务态度=0","快递配送速度=0","快递员服务=0","快递包装=0"],"1002":["商品符合度=0","店家服务态度=0","快递配送速度=0","快递员服务=0","快递包装=0"]} // 解析cookie中存储的评论结果。 if(!document.cookie.includes("comment=")) return let o = JSON.parse(document.cookie.match(/(\{.*?\})/)[1]); if(!o) return // 解析后的o如下 // ["商品符合度=1", "店家服务态度=0", "快递配送速度=0", "快递员服务=0", "快递包装=0"] for(let prop in o){ if(this.name===prop){ this.score=o[prop].reduce((value,item,index)=>{ let arr=item.split("="); if(arr[0].includes(this.label)) value=parseInt(arr[1]); return value; },0) } } } }
使用时传入标签,新建实例。
import Stars from './js/Stars.js'; let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"]; // let star = new Stars(list[0]); // star.appendTo("body"); list.forEach(item=>{ // 传入标签和对应的商品id let star = new Stars(item,"1001"); star.appendTo(".div1"); }) list.forEach(item=>{ let star = new Stars(item,"1002"); star.appendTo(".div2"); })
感谢各位的阅读!关于“JS如何实现五星好评效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。