五星好评案例
第一步导入js文件Start,定义List
import Star from "./js/Star.js" ;
let list= [ "商品符合度" ,"店家服务态度" ,"快递配送速度" ,"快递员服务" ,"快递包装" ]
for( var i= 0; i< list.length; i++) {
// TODO Star
let star= new Star( list[ i] ) ;
star.appendTo( "body" ) ;
star.addEventListener( "change" ,changeHandler) ;
}
Component.js
export default class Component extends EventTarget{
elem;
constructor( ) {
super( ) ;
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) ;
}
}
Start.js文件
import Component from "./Component.js" ;
// TODO Star
export default class Star extends Component{
static STAR_NUM= 5;
label= "" ;
starCon;
face;
score;
pos= -1;
starArr= [ ] ;
static StarScoreList= { } ;
constructor( _label) {
super( ) ;
this.label= _label;
Object.assign( this.elem.style,{
width: "auto" ,
float: "left" ,
height: "16px" ,
paddingBottom: "10px" ,
marginRight: "20px" ,
paddingTop:"16px"
} )
Star.StarScoreList[ _label] = 0;
this.createLabel( _label) ;
this.createStar( ) ;
this.createScore( ) ;
}
// TODO 创建label标签
createLabel( _label) {
let labels= document.createElement( "span" ) ;
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) ;
}
// TODO 创建星星
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,{
width:"16px" ,
height:"16px" ,
float:"left" ,
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) ;
}
// TODO 创建分数
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,"\u5b8b\u4f53",sans-serif' ,
} ) ;
this.score.textContent= "0分" ;
this.elem.appendChild( this.score) ;
}
mouseHandler( e) {
switch( e.type) {
case "click" :
case "mouseover" :
let index= this.starArr.indexOf( e.target) ;
if( index< 0) return ;
if( e.type== = "click" ) {
this.pos= index;
this.dispatch( ) ;
}
else{
this.changeScore( index+1) ;
this.changeFace( index) ;
}
this.changeStar( index) ;
break ;
case "mouseleave" :
this.changeStar( this.pos) ;
this.changeScore( this.pos+1) ;
this.changeFace( -1) ;
break ;
}
}
changeStar( n) {
for( var 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" ;
}
}
}
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
}
var 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" ;
}
dispatch( ) {
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) ;
}
}