老师，我有个问题
来源：6-1 上升到面向对象-红绿灯小案例
玄鱼琉璃
2020-11-10 12:06:37
我不是用面向对象写的，您看看这样写有没有问题，或者说哪里不好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
var oimg;
//创建100个img
for (var i = 0;i<100;i++) {
oimg = document.createElement('img');
oimg.src = '08_红绿灯/images/1.png';
box.appendChild(oimg);
}
//给外层盒子加单击事件，冒泡原理
box.onclick = function(e){
//初始化
function init(){
//红灯为1，黄灯2，绿灯3
//当不是黄灯和绿灯时，设置为红灯
if (e.target.c != 2 && e.target.c != 3) {
e.target.c = 1;
}
}
init();
e.target.c ++;
if (e.target.c == 4) {
e.target.c = 1;
}
e.target.src = '08_红绿灯/images/'+e.target.c+'.png';
}
}
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
1回答
-
同学你好，使用同学提供的代码测试，效果是可以实现的。不过，老师写的代码复用性比较高，复用时操作比较方法。例如：把老师写的代码放到一个单独的js文件中，哪个地方需要，直接引入js，想要几个红绿灯，实例化几个TrafficLight即可，操作起来比较方便。
使用同学的代码，代码放到一个js文件中，引入之后，如果想生成红绿灯，还需要生成img标签等，相对来说，比较麻烦一些。
祝学习愉快~
0
相似问题