标签：style http color io java ar for div sp
感谢自学IT网的燕十八老师
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>观察者模式</title>
<style type="text/css" media="all">
#sec{
margin:20px;
}
#cont,#ad,#study{
width:400px;
height:200px;
margin:10px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class=‘container‘>
<select name="" id="sec">
<option value=‘male‘>男性</option>
<option value=‘famale‘>女性</option>
</select>
<input type=‘button‘ value=‘观察尾部‘ onclick=‘t1()‘ />
<input type=‘button‘ value=‘不观察尾部‘ onclick=‘t2()‘ />
<div id=‘cont‘>这里是内容</div>
<div id=‘ad‘>这里是广告</div>
<div id=‘study‘>这里是学习</div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var sec = document.getElementById(‘sec‘);
var ad = document.getElementById(‘ad‘);
var cont = document.getElementById(‘cont‘);
var study = document.getElementById(‘study‘);
sec.observers = {};
sec.attach = function(key,obj){
this.observers[key] = obj;
}
sec.detach = function(key){
delete sec.observers[key];
}
sec.onchange = sec.notify = function(){
for(var key in this.observers){
this.observers[key].update(this);
}
}
cont.update = function(observer){
if (observer.value==‘male‘)
{
this.style.backgroundColor = ‘gray‘;
}else if (observer.value==‘famale‘){
this.style.backgroundColor = ‘pink‘;
}
}
ad.update = function(observer){
if (observer.value==‘male‘)
{
this.innerHTML = ‘汽车‘;
}else if (observer.value==‘famale‘){
this.innerHTML = ‘减肥‘;
}
}
study.update = function(observer){
if (observer.value==‘male‘)
{
this.innerHTML = ‘电脑‘;
}else if (observer.value==‘famale‘){
this.innerHTML = ‘化妆‘;
}
}
// 监听
sec.attach(‘cont‘,cont);
sec.attach(‘ad‘,ad);
sec.attach(‘study‘,study);
function t1(){
// 观察尾部
sec.attach(‘study‘,study);
}
function t2(){
// 不观察尾部
sec.detach(‘study‘);
}
</script>
</html>
标签：style http color io java ar for div sp
原文地址：http://my.oschina.net/u/946060/blog/315252
