前端界面

html代码

<body>

    <select name="" id="select">

        <option value="">请选择风格</option>

        <option value="male">男式风格</option>

        <option value="female">女士风格</option>

    </select>

    <button onclick="t1();">观察学习区</button>

    <button onclick="t2();">不观察学习区</button>

    <div id="content">内容区</div>

    <div id="ad">广告区</div>

    <div id="study">学习区</div>

</body>

css样式

<style>

#content,#ad,#study{

    width: 498px;

    height: 150px;

    border:1px solid #;

    margin-top: 10px;

}

</style>

js代码

<script>

    var sel = document.getElementById("select");

    // console.log(sel)

    sel.objs = {}

    sel.attach = function(key,obj){

        this.objs[key] = obj;

    }

    sel.delAttach = function(key){

        delete this.objs[key];

    }

    sel.onchange = function(){

        for(var key in this.objs){

            this.objs[key].update(this)

        }

    }

    // 客户端

    var content = document.getElementById('content')

    var ad = document.getElementById('ad')

    var study = document.getElementById('study')

    content.update = function(objs){

        if (objs.value == 'male') {

            content.style.backgroundColor = "blue";

        }else if (objs.value == 'female') {

            content.style.backgroundColor = "pink";

        }else{

            content.style.backgroundColor = "";

        }

    }

    ad.update = function(objs){

        if (objs.value == 'male') {

            ad.innerHTML = "汽车";

        }else if (objs.value == 'female') {

            ad.innerHTML = "减肥";

        }else{

            ad.innerHTML = "广告区";

        }

    }

    study.update = function(objs){

        if (objs.value == 'male') {

            study.innerHTML = "学习编程";

        }else if (objs.value == 'female') {

            study.innerHTML = "学习美工";

        }else{

            study.innerHTML = "学习区";

        }

    }

    sel.attach('content',content);

    sel.attach('ad',ad);

    sel.attach('study',study);

    function t1(){

        sel.attach('study',study)

    }

    function t2(){

        sel.delAttach('study')

    }

</script>

js设计模式之实现观察者模式实例代码的更多相关文章

  1. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  2. JS判断不能为空实例代码

    JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  3. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  4. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  5. php设计模式之观察者模式实例代码

    php提供的两个接口,一个被观察者接口SplSubject,一个或多个观察者接口SPLObserver,和一个可以储存对象的类SplObjectStorage.被观察者有三个方法,需要实现这三个方法, ...

  6. php设计模式之工厂方法实例代码

    实现不修改原代码,扩展新功能 <?php header("Content-type:text/html;charset=utf-8"); /** * db接口 * 实现连接数 ...

  7. php设计模式之桥接模式实例代码

    <?php header("Content-type:text/html;charset=utf-8"); abstract class msg{ protected $se ...

  8. php设计模式之策略模式实例代码

    html <html> <head> <meta charset="UTF-8"> <title>简单计算器</title&g ...

  9. php设计模式之单例实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 第一步,分别实例化 */ /*class Single ...

随机推荐

  1. CTF伪协议+preg_replace()函数的代码执行

    一道学习中所遇到的ctf 步骤: 我们点击题目链接,然后在页面先点击”云平台后台管理中心“ 然后url后面跟了参数page,题目提示了一个文件包含,我们试试index.php 看到了输出了ok,应该是 ...

  2. C语言 switch

    C语言 switch 功能:获取到值对应成立不同表达式. 优点:switch 语句执行效率比if语句要快,switch是通过开关选择的方式执行,而if语句是从开头判断到结尾. 缺点:不能判断多个区间. ...

  3. POI导出PPT

    1.null <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <g ...

  4. react-native构建基本页面1---主页：tab栏

    配置Tab栏 配置Tab栏的图标 注意:使用图标,需要接收 license; /** * Sample React Native App * https://github.com/facebook/r ...

  5. AcWing 1049. 大盗阿福

    //f[i,j]表示所有走了i步,且当前位于状态j的所有走法 j=1表示选第i个 j=0表示不选 //如果j=0 那么表示不选第i个 那么就可以从f[i-1,0]和f[i-1,1]转移过来 //如果j ...

  6. vlan划分、本征vlan配置、中继

    命令部分: vlan划分(全局模式) vlan name v10 no shu no shu switchport access vlan vlan name v20 inter vlan no sh ...

  7. sqli-labs less-1 --> less-4

    Less-1  (报错注入) 因为第一次做这些题,不太了解,所以$sql下加上echo "$sql<br>";能更明显的看出具体的输入 1.判断是否存在注入点 当输入? ...

  8. vue自定义日期选择，类似美团日期选择，日历控件，vue日历区间选择

    一个日历的控件,基于vue的,可以日历区间选择,可用于酒店日历区间筛选,动手能力强,可以修改成小程序版本的,先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说,直接上干货,代码可以直接复 ...

  9. cookie和会话

    一.为什么要使用cookie和会话 HTTP是一种无状态技术,这意味着每个单独的HTNML页面都是一个无关的.当人们穿过站点时,HTTP 没有用于跟踪用户或保持变量的方法,尽管浏览器会跟踪你访问过的页 ...

  10. Tomcatd断点调试Debug

    ideaDebug设置