<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='box'></div>
<script>
function jtd(){
// 设置红色1,黄色2,绿色3
this.color=1;
// 调用红绿灯图片
this.photo();
// 调用点击事件
this.dj();
}
jtd.prototype.photo=function(){
// 新建一个img结点
this.dom=document.createElement('img');
// 节点上树
box.appendChild(this.dom);
this.dom.src='picture/'+this.color+'.jpg';
}
jtd.prototype.dj=function(){
// 备份上下文
var self=this;
this.dom.onclick=function(){
// 调用更改图片
self.changeColor();
}
}
jtd.prototype.changeColor=function(){
this.color++;
if (this.color==4) {
this.color=1;
}
this.dom.src='picture/'+this.color+'.jpg';
}
var box=document.getElementById('box');
var i=100;
while(i--){
new jtd();
}
</script>
</body>
</html>
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交