想法是,一张empty.png(空心的星),一张full.png(实心的星),然后onmouse事件切换
html
<div id="content"></div> <!--星是动态插入的-->
css
#content{
width: 500px;
height: 200px;
border: 1px solid grey;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.star{
width: 50px;
height: 50px;
margin: 5px;
background: url(empty.png) no-repeat;
}
js
- 想试着用面对对象思想去写
//动态添加星
var addStar = function(){
for(let i = 0; i < num; i++){
let div = document.createElement('div')
div.className = 'star'
document.getElementById("content").appendChild(div)
}
}
var Star = function(){
//以一个类封装所有的属性和方法
var o = {}
o.starList = document.getElementsByClassName('star')
o.flag = true
//清除实心
o.clearStar = function(){
for(let i = 0; i < num; i++){
o.starList[i].style.backgroundImage = "url('empty.png')"
}
}
//鼠标移动到星上 & flag == tre
o.onMouse = function(i){
if(o.flag){
for(let j = 0; j <= i; j++){
o.starList[j].style.backgroundImage = "url('full.png')"
}
}
}
//鼠标移出星 & flag == true
o.offMouse = function(i){
if(o.flag){
for(let j = 0; j <= i; j++){
o.starList[j].style.backgroundImage = "url('empty.png')"
}
}
}
//点击星(将flag设为false就不会触发onmouseout事件
o.onClick = function(i){
o.flag = false
o.clearStar()
for(let j = 0; j <= i; j++){
o.starList[j].style.backgroundImage = "url('full.png')"
}
}
return o //返回这个类
}
//主函数 do thing
var __main = function(){
addStar()
var star = Star()
for(let i = 0; i < num; i++){
star.starList[i].onmouseover = function(){
star.onMouse(i)
}
star.starList[i].onmouseout = function(){
star.offMouse(i)
}
star.starList[i].onclick = function(){
star.onClick(i)
}
}
}
const num = 5 //五颗星
__main()