JS实现五星好评案例
本文实例为大家分享了JS实现五星好评案例的具体代码，供大家参考，具体内容如下
业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为，分数对应行为，笑脸对应行为，点击对应行为，抽象化出来，方便维护。并且在点击后我们抛出事件，记录下对应的name，分数等信息，保存在cookie中。
在编写过程中，一个是位置问题，很容易出现在没有创建就进行appendChild，第二个就是在添加行为时如何调整星星，笑脸的位置。
<!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";
let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"]
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形式存储到cookie中
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;
}
}
}
</script>
</body>
</html>
export default class Component{ //创建warp 和 appendTo方法
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: '12px/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 i=0;i<Star.STAR_NUM;i++){
let star=document.createElement("div");
Object.assign(star.style,{
backgroundImage:"url(./img/commstar.png)",
width:"16px",
height:"16px",
float:"left",
})
this.starArr.push(star);
this.starCon.appendChild(star);
}
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);
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");
}
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:"12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,sans-serif",
});
this.score.textContent="0分";
this.starCon.appendChild(this.score);
}
mouseHandler(e){ //鼠标行为
let index=this.starArr.indexOf(e.target);
switch(e.type){
case "mouseover":
if(index<0) return;
this.changeFace(index);
this.changeScore(index+1);
this.changeStar(index+1);
break;
case "click":
this.pos=index;
this.dispatch();
break;
case "mouseleave":
this.changeStar(this.pos+1);
this.changeFace(this.pos);
this.changeScore(this.pos+1);
break;
default:
return;
}
}
changeStar(n){
for(let i=0;i<this.starArr.length;i++){
if(i<n){
this.starArr[i].style.backgroundPositionY="-16px";
}else{
this.starArr[i].style.backgroundPositionY="0px";
}
}
}
changeScore(n){
this.score.textContent=n+"分";
if(n===0){
this.score.style.color="#999";
}else{
this.score.style.color="#e4393c";
}
}
changeFace(n){
if(n<0){
this.face.style.display="none";
return;
}
let index=Star.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";
}
changeScore(n){
this.score.textContent=n+"分";
if(n===0){
this.score.style.color="#999";
}else{
this.score.style.color="#e4393c";
}
}
dispatch(){
// console.log("aaa")
Star.StarScoreList[this.label]=this.pos+1;
var evt=new Event("change");
evt.score=this.pos+1;
evt.label=this.label;
evt.scoreList=Star.StarScoreList;
this.dispatchEvent(evt);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现五星好评效果
用JS实现面向对象方法实现京东的五星好评效果. 鼠标滑过时的显示: 当评价完成后,关闭浏览器重新打开页面,还是上次的评价结果.用cookie实现. 具体实现如下: import Componenet from "./Component.js"; export default class Stars extends Componenet { label; STARS_NUM = 5; starArr = []; score = 0; starsCon; faceIcon; scoreCo
-
JavaScript实现商品评价五星好评
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码,供大家参考,具体内容如下 一.效果展示 二.代码实现 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>好评</title> <link rel="stylesheet" type="text/css" href
-
JS实现五星好评案例
本文实例为大家分享了JS实现五星好评案例的具体代码,供大家参考,具体内容如下 业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为,分数对应行为,笑脸对应行为,点击对应行为,抽象化出来,方便维护.并且在点击后我们抛出事件,记录下对应的name,分数等信息,保存在cookie中. 在编写过程中,一个是位置问题,很容易出现在没有创建就进行appendChild,第二个就是在添加行为时如何调整星星,笑脸的位置. <!DOCTYPE html> <html lang=&qu
-
JS+cookie实现购物评价五星好评功能
本文实例为大家分享了JS+cookie实现购物评价五星好评功能的具体代码,供大家参考,具体内容如下 案例实现的是购物评价中五星点评功能. 通过JS面向对象方法实现 利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果. 具体html,js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
JS与JQuery分别实现淘宝五星好评特效
本文实例为大家分享了JS与JQuery实现淘宝五星好评特效的具体代码,供大家参考,具体内容如下 我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><
-
vue.js+boostrap项目实践(案例详解)
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
-
Android自定义View实现五星好评效果
本文实例为大家分享了Android实现五星好评效果的具体代码,供大家参考,具体内容如下 这个效果想必大家都非常熟悉,那么Android如何自定义实现这种效果呢? 首先自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RatingStar"> <attr name="starNorm
-
js观察者模式的弹幕案例
本文实例为大家分享了js观察者模式的弹幕案例代码,供大家参考,具体内容如下 观察者模式的弹幕案例 上代码 弹幕.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
-
react.js框架Redux基础案例详解
react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/
-
Vue.js之$emit用法案例详解
1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&