面向对象写法的简单小例子，也即是一个小模板，方便以后拿来参考，如果有误，请各位大神多多指点。
思想：主要给#box添加颜色和添加内容，一个方法是添加颜色，另一个方法是添加内容，然后编写的面向对象写法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#box{
width:100px;
height:100px;
background:orange;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script>
//构造函数
function MyBox(options)
{
//此刻option.box 指的是 box:document.getElementById(‘box‘)
this.box = options.box;
//每个方法最好分开来写
//切换颜色的方法
this.boxColor();
//给box添加内容
this.addSpan();
}
//编写颜色的方法
MyBox.prototype.boxColor = function()
{
//那么在这里也就可以继承this.box 这个属性
var myBox = this.box;
//这里创建一个span,这里只是演示，让我们在addSpan中也能访问到this.span
this.span = document.createElement(‘span‘);
var boxBlue = function()
{
myBox.style.background = ‘blue‘;
}
// 监听事件
box.addEventListener(‘click‘,boxBlue);
}
//添加span的方法
MyBox.prototype.addSpan = function()
{
var myBox = this.box;
//继承下来的this.span 可以拿来这里用
var span = this.span;
span.innerHTML = ‘请大神多多指教‘;
myBox.appendChild(span);
}
//new 一个对象，然后参数又是一个对象;
new MyBox({
box:document.getElementById(‘box‘)
});
</script>
时间： 2024-10-13 02:11:02