Shulou(Shulou.com)06/03 Report--

This article is to share with you about how JS achieves five-star praise. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use JS to achieve the object-oriented method to achieve JD.com 's five-star praise effect.

Mouse slide outdated display:

When the evaluation is complete, close the browser and reopen the page, which is the result of the last evaluation. It is realized by cookie.

The specific implementation is as follows:

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= {}; / / stores all the five-star evaluation results on the current page, one item in a group. Use the id of the commodity as the key, and use the commodity evaluation to form an array, as the 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",}) / / parses the comment results stored in cookie and initializes the value of score when each comment is created. This.changeStarStyle (this.score-1); / / initialize the score this.changeScore (this.score); / / add mouse over-click events. 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 constructor created HTML LIElement) return this.index = this.starArr.indexOf (e.target); this.score = this.index+1; this.changeStarStyle (this.index) This.changeScore (this.index+1); / / stores the result of the comment in cookie for each click so that it can be read the next time the page is opened. What is stored in STARS_LIST is the data of label as key,score as 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;}) } [xss_clean] = "comment=" + JSON.stringify (Stars.STARS_LIST) + "; expires=" + this.date.toUTCString ();} mouseHandler (e) {switch (e.type) {case "mouseenter": this.faceIcon.style.display = "block"; break This.changeScore (index + 1); this.changeFaceStyle (index); break;}} changeStarStyle (_ I) {for (let n = 0; n)

< this.starArr.length; n++) { if (n { 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=>

{/ / incoming label and corresponding product id let star = new Stars (item, "1001"); star.appendTo (".div1");}) list.forEach (item= > {let star = new Stars (item, "1002"); star.appendTo (".div2");}) Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.