0%
分为两种封装形式 对象封装 和 函数封装
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <html>
<head>
<style>
*{margin:0; padding:0}
div ul{
display: flex;
}
div ul li{
list-style-type:none;
width: 50px; height: 50px; background-color:yellow; margin:0 10px; transition: all .3s;
}
div ul li.active{
background: red
}
</style>
</head>
<body>
<div>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
|
对象封装JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| // var starObj = {
// lis:document.getElementsByTagName("li"),
// selectStar: 0,
// run :function(){
// this.hover()
// this.click()
// this.mouseout()
// } ,
// starShow : function(index){
// for(var i = 0; i<this.lis.length; i++){
// this.lis[i].className = i <= (index || this.selectStar) ? 'active' : ''
// }
// },
// hover :function(){
// var me = this;
// for(var i =0 ; i<this.lis.length; i++){
// //解决闭包问题
// this.lis[i].index = i;
// this.lis[i].onmouseover = function(){
// me.selectStar = 0;
// me.starShow(this.index)
// }
// }
// },
// click : function(){
// var me = this;
// for(var i =0 ; i<this.lis.length; i++){
// //解决闭包问题
// this.lis[i].index = i;
// this.lis[i].onclick = function(){
// me.selectStar = this.index
// me.starShow()
// console.log(`you pinfen is ${this.index + 1}`)
// }
// }
// },
// mouseout :function(){
// var me = this;
// for(var i =0 ; i<this.lis.length; i++){
// //解决闭包问题
// this.lis[i].index = i;
// this.lis[i].onmouseout = function(){
// me.starShow(0)
// //console.log(`you pinfen is ${this.index + 1}`)
// }
// }
// // this.starShow(0)
// }
// }
//starObj.run()
|
函数封装JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| function Star(){
this.lis = document.getElementsByTagName("li"),
this.selectStar = 0
};
Star.prototype = {
run:function(){
this.hover()
this.click()
this.mouseout()
},
starShow : function(index){
for(var i = 0; i<this.lis.length; i++){
this.lis[i].className = i <= (index || this.selectStar) ? 'active' : ''
}
},
hover :function(){
var me = this;
for(var i =0 ; i<this.lis.length; i++){
//解决闭包问题
this.lis[i].index = i;
this.lis[i].onmouseover = function(){
me.selectStar = 0;
me.starShow(this.index)
}
}
},
click : function(){
var me = this;
for(var i =0 ; i<this.lis.length; i++){
//解决闭包问题
this.lis[i].index = i;
this.lis[i].onclick = function(){
me.selectStar = this.index
me.starShow()
console.log(`you pinfen is ${this.index + 1}`)
}
}
},
mouseout :function(){
var me = this;
for(var i =0 ; i<this.lis.length; i++){
//解决闭包问题
this.lis[i].index = i;
this.lis[i].onmouseout = function(){
me.starShow(0)
//console.log(`you pinfen is ${this.index + 1}`)
}
}
// this.starShow(0)
}
}
var starObj = new Star()
console.log(starObj)
starObj.run()
|