简单实现五星好评+cookie保存评分记录（面向对象）

效果图如下：

思路：1、通过构造函数传入所需要的数据：所要创建的标签名和cookie的内容；

2、创建标签名、五星、评分部分；

3、执行初始化函数，读取cookie中的内容，显示上次选定的评分。

注意点：1、鼠标经过时显示相应的表情，由于背景图片中的表情顺序与评分显示相反，所以应注意图片的移动；

2、鼠标点击相应的星星后，鼠标再次经过，被点击的星星及之前的星星样式都是被选中状态；

3、执行程序前，需要先获取cookie的内容，然后创建星星时传入。

实现cooki信息的传入有两种方式：（1）通过构造函数传入；（2）设置静态方法，在外部调用。此处采用的是第一种方法。

具体代码如下：

js文件

import Component from "./Component.js"; //常用的创建元素、填充元素等单独设置一个文件，方便使用export default class Star extends Component{label;score;starArr=[];starCon;face;pos=-1;obj={};static STAR_NUM=5;constructor(_label,_obj){  //通过构造函数传入标签名和cookie中的内容super();this.label=_label;this.obj=_obj;Object.assign(this.elem.style,{width:"auto",height:"32px",float:"left",margin:"30px",position:"relative",});this.createLabel();this.createStar();this.createScore();this.init();  //执行初始化函数，查询cokie中的内容}                                   init(){if(this.obj===undefined)return;for(let prop in this.obj){if(prop===this.label){   //如果找到对应标签的评分，则修改评分的初始内容this.pos=this.obj[prop]-1;this.changeStar(this.pos);this.changeScore(this.pos+1);return;}}}createLabel(){let labels =document.createElement("span");labels.textContent=this.label;Object.assign(labels.style,{height:"16px",float:"left",fontSize:"12px",lineHeight:"16px",textAlign:"center",margin:"0px 10px",position:"relative"});this.elem.appendChild(labels);}createStar(){this.starCon=document.createElement("div");Object.assign(this.starCon.style,{height:"16px",float:"left",position:"relative"});for(let i=0;i<Star.STAR_NUM;i++){let star =document.createElement("div");Object.assign(star.style,{height:"16px",width:"16px",float:"left",// margin:"5px"backgroundImage:"url(./img/commstar.png)"});this.starArr.push(star);this.starCon.appendChild(star);}this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e));this.starCon.addEventListener("click",e=>this.mouseHandler(e));this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e));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.starCon.appendChild(this.face);this.elem.appendChild(this.starCon);}                         createScore(){ this.score =document.createElement("span");this.score.textContent="0分";Object.assign(this.score.style,{height:"16px",float:"left",fontSize:"12px",color:"#999",lineHeight:"16px",textAlign:"center",margin:"0px 10px",});this.elem.appendChild(this.score);}            mouseHandler(e){if(e.type==="mouseover"){let index=this.starArr.indexOf(e.target);if(index<0)return;this.changeStar(index);this.changeFace(index);this.changeScore(index+1);}else if(e.type==="click"){let index=this.starArr.indexOf(e.target);if(index<0)return;this.pos=index;this.changeStar(index);this.dispatch();}else if(e.type==="mouseleave"){this.changeStar(this.pos);this.changeScore(this.pos+1);this.changeFace(-1);}}changeStar(n){for(let i=0;i<this.starArr.length;i++){if(i<=n || i<=this.pos){this.starArr[i].style.backgroundPositionY="-16px";}else{this.starArr[i].style.backgroundPositionY="0px";           }}}changeFace(n){let index=Star.STAR_NUM-n-1;if(n<0){this.face.style.display="none";return;}this.face.style.display="block";//移动相应的像素，鼠标移动到星星时显示对应的表情图片this.face.style.backgroundPositionX=-index*20+"px";  this.face.style.left=this.starArr[n].offsetLeft+"px";}changeScore(n){this.score.textContent=n+"分";if(n===0){  //n=0表示this.score.style.color="#999";}else{this.score.style.color="#f26";} }dispatch(){var evt=new Event("change");evt.label=this.label;evt.score=this.pos+1;this.dispatchEvent(evt);}
}

html文件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script type="module">import Star from "./js/Star.js";var list=["商品描述","卖家服务态度","快递包装","快递配送速度","快递服务态度"];var obj;var date=new Date();date.setMonth(11);obj=getCookie();  //每次执行程序之前，先获取cookie中的内容         for(let i=0;i<list.length;i++){let star=new Star(list[i],obj);  //把cookie中的内容传入star.appendTo("body");star.addEventListener("change",changeHandler);} function changeHandler(e){obj[e.label]=e.score;setCookie(obj,date);   //设置cookie存储的内容}function setCookie(data,date){var str=date===undefined ? "" : ";expires="+date.toUTCString();for(var prop in data){var value=data[prop];if(typeof value==="object" && value!==null) value=JSON.stringify(value);document.cookie=prop+"="+value+str;}}function 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;},{})}        </script></body>
</html>

简单实现五星好评+cookie保存评分记录（面向对象）相关推荐

使用cookie实现京东商品评价的五星好评组件的评分数据存储
整个项目的文件结构: img文件夹中使用的图片 commstar.png: face-red.png: JS代码 export default class Star {elem;label;name; ...
jq简单实现五星好评
点击后可以再次确认选择用到的api find() 查询父节点中符合参数条件的子节点 html() 赋值,将获取的值显示 parent() 查找当前节点的父元素 parents() 查找祖先元素 ne ...
java用cookie最新浏览商品_jQuery.cookie.js实现记录最近浏览过的商品功能示例
本文实例讲述了jQuery.cookie.js实现记录最近浏览过的商品功能.分享给大家供大家参考,具体如下: 1.jquery.cookie.js /*jquery.cookie.js */ jque ...
cookie实现京东五星好评组件评分数据存储
cookie实现京东五星好评组件评分数据存储实现目标: 实现京东五星好评部分的组件,实现鼠标经过星星时星星变红色,星星上方出现对应星级的笑脸,同时在评价n星后显示分数为n分,使用cookie缓存使用 ...
使用cookie保存用户的浏览记录
我们在写关于用户对商品额的浏览记录的时候一般使用cookie进行记录,cookie一般保存字符串比较常用,如果想保存对象可以使用序列化,这里不做过多的解释,我们现在只做简单的cookie应用,cook ...
五星好评html编写,五星好评.html
五星好评 body{ /*文字大小12px,1.5倍的行间距 ,arial 一种字体*/ font: 12px/1.5 arial; color: #666; } ul,p{ margin: 0; p ...
php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
php 识别图片五星好评,jquery实现五星好评方法
本文主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的d ...
微信小程序开发 - 五星好评
前言由于最近公司前端组开发紧缺人手,公司医美项目比较赶,所以主动请求协助医美小程序开发,现学现用,不过觉得小程序还蛮简单的,在做到一个评价医生页面时,用到点击五星好评,觉得有点用,就分享上来了~ 效 ...

简单实现五星好评+cookie保存评分记录（面向对象）

简单实现五星好评+cookie保存评分记录（面向对象）相关推荐

最新文章

热门文章