老师，有个问题，请看下
来源：6-1 上升到面向对象-红绿灯小案例
weixin_慕移动6442865
2020-12-04 17:34:56
请问老师，颜色改变那边，如何优化判断， 像这种如何优化呢boxs[2].classList.remove('green')？？
第二个问题，我想问下像这种不是图片来改变颜色怎么样实例出100个啊？
<style>
.box{
width: 80px;
height: 200px;
background-color:black;
overflow: hidden;
}
.box>.boxs{
width: 70px;
height: 50px;
margin:0 auto;
margin-top:10px;
border:1px solid #fff;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class='boxs'>1</div>
<div class='boxs'>2</div>
<div class='boxs'>3</div>
</div>
</body>
<script>
var box=document.getElementById('box');
var boxs=document.getElementsByClassName('boxs')
function Light(){
this.color=0
this.init();
this.btn();
}
//初始化
Light.prototype.init=function(){
boxs[this.color].classList.add('red')
}
//事件绑定
Light.prototype.btn=function(){
var self=this;
box.onclick=function(){
self.colorChange();
}
}
//颜色改变
Light.prototype.colorChange=function(){
this.color++;
if(this.color==3){
this.color=0
}
if(this.color==0){
boxs[this.color].classList.add('red')
boxs[2].classList.remove('green')
}else if(this.color==1){
boxs[this.color].classList.add('yellow')
boxs[0].classList.remove('red')
}else if(this.color==2){
boxs[this.color].classList.add('green')
boxs[1].classList.remove('yellow')
}
}
var l=new Light()
</script>
1回答
-
同学你好，对于你的问题解答如下：
1、可以遍历所有的盒子，通过className设置所有的元素的类名为boxs，然后再单独给当前被点击的盒子添加特殊的类名。
2、与图片是差不多的实现思路，先动态创建元素，追加到页面中，然后使用while循环，多次实例化即可。
由于代码较多，老师在代码中添加了注释，同学可以结合代码注释测试理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 80px; height: 200px; background-color: black; overflow: hidden; /* 设置左浮动 */ float: left; /* 调整间距 */ margin: 10px; } .box>.boxs { width: 70px; height: 50px; margin: 0 auto; margin-top: 10px; border: 1px solid #fff; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } </style> </head> <body> <!-- js动态生成元素，去掉html结构即可 --> <!-- <div class="box" id='box'> <div class='boxs'>1</div> <div class='boxs'>2</div> <div class='boxs'>3</div> </div> --> </body> <script> // 不需要再获取了 // var box = document.getElementById('box'); // var boxs = document.getElementsByClassName('boxs') function Light() { this.color = 0 this.init(); this.btn(); } //初始化 Light.prototype.init = function () { // 动态创建外层盒子 this.box = document.createElement('div'); //添加类名 this.box.classList.add('box') // 创建三个小盒子 for (var i = 0; i < 3; i++) { var box = document.createElement('div'); // 添加类名 box.classList.add('boxs') // 设置小盒子的内容 box.innerHTML = i // 将小盒子追加到外层盒子中 this.box.appendChild(box) } // 将大盒子追加到页面中 document.body.appendChild(this.box) // 获取每个大盒子下的所有小盒子 this.boxs = this.box.getElementsByClassName('boxs') // 默认第几个显示红色 this.boxs[this.color].classList.add('red') } //事件绑定 Light.prototype.btn = function () { var self = this; // 通过this获取元素 this.box.onclick = function () { self.colorChange(); } } //颜色改变 Light.prototype.colorChange = function () { this.color++; if (this.color == 3) { this.color = 0 } // 通过this获取元素，设置所有的小盒子类名为boxs for (var i = 0; i < this.boxs.length; i++) { this.boxs[i].className = "boxs" } if (this.color == 0) { this.boxs[this.color].classList.add('red') //通过this获取元素 } else if (this.color == 1) { this.boxs[this.color].classList.add('yellow') //通过this获取元素 } else if (this.color == 2) { this.boxs[this.color].classList.add('green') //通过this获取元素 } } // var l = new Light() // 实例化100个 var count = 100; while (count--) { new Light(); } </script> </body> </html>效果图：
祝学习愉快~
0
相似问题