How to achieve five-star praise by JS
This article mainly introduces JS how to achieve five-star praise, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
The details are as follows
Business logic is that I need to first create all the tags and styles I need to use, and then write our star corresponding behavior, score corresponding behavior, smiley face corresponding behavior, click corresponding behavior, abstract out, easy to maintain. And after clicking, we throw the event, record the corresponding name, score and other information, and save it in cookie.
In the process of writing, one is the position problem, which is easy to appendChild without creation, and the second is how to adjust the position of stars and smiley faces when adding behavior.
Document import Star from ". / js/Star.js"; let list= ["Commodity conformity", "Store Service attitude", "Express delivery Speed", "courier Service", "Express Packaging"] list.forEach (item = > {let star = new Star (item); star.appendTo ("body"); star.addEventListener ("change", changeHandler) }); function changeHandler (e) {var date=new Date (); date.setMonth (11); setCookie (e.scoreList _ date); function setCookie (data,date) {/ / JSON is stored in cookie var str=date===undefined? ":"; expires= "+ date.toUTCString () For (var prop in data) {var value=data [prop]; if (typeof value=== "object" & & valueworthy empty null) value=JSON.stringify (value); [xss_clean] = prop+ "=" + value+str;} export default class Component {/ / create warp and appendTo method elem Constructor () {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);} import Component from ". / Component.js" Export default class Star extends Component {label= "; score; face; starCon; static STAR_NUM=5; starArr= []; static StarScoreList= []; pos=-1; constructor (_ label) {super (); this.label=_label Object.assign (this.elem.style, {width: "auto", height: "16px", float: "left", paddingBottom: "10px", marginRight: "20px", paddingTop: "16px",}) Star.StarScoreList [_ label] = 0; this.createLable (_ label); this.createStar () This.createScore ();} createLable (_ label) {let labels=document.createElement ("div"); labels.textContent=_label Object.assign (labels.style, {float: "left", height: "16px", lineHeight: "16px", marginRight: "10px", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", font: '12pxamp 150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB "\ u5b8b\ u4f53", sans-serif', color: "# 666"}) This.elem.appendChild (labels);} createStar () {this.starCon=document.createElement ("div"); Object.assign (this.starCon.style, {float: "left", height: "16px", position: "relative", marginTop: "1px"}) for (let item0 Ithis.mouseHandler (e)) this.starCon.addEventListener ("click", e = > this.mouseHandler (e)) this.starCon.addEventListener ("mouseleave", e = > this.mouseHandler (e)) this.face=document.createElement ("div");} createScore () {this.score=document.createElement ("span") Object.assign (this.score.style, {position: "relative", width: "30px", height: "16px", top: "- 2px", marginLeft: "10px", lineHeight: "16px", textAlign: "right", color: "# 999", font: "12pxmax 150% tahoma,arial" Microsoft YaHei,Hiragino Sans GB,sans-serif ",}) This.score.textContent= "0"; this.starCon.appendChild (this.score);} mouseHandler (e) {/ / mouse behavior let index=this.starArr.indexOf (e.target); switch (e.type) {case "mouseover": if (index)
