前端界面

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. 初识linux&常用命令&目录文件的浏览和管理

    Linux系统的主要用途:主要用于服器务器,特别是网络服务 Linux命令格式 命令   [选项]  [ 参数] 命令:告诉操作系统做什么,执行什么 选项:说明命令的运行方式(可以改变命令的功能).选 ...

  2. 本地文件包含(LFI)漏洞

    PHP file://封装 PHP php://filter PHP ZIP封装LFI 通过/proc/self/environ执行LFI 空字节技术 截断LFI绕过 通过邮件给目标机器发送一个反弹s ...

  3. Java定时任务之Timer

    Timer是Java中实现定时任务的方式之一,下面是一个简单的例子: import java.util.Timer; import java.util.TimerTask; public class ...

  4. JavaScript 13 Ajax技术（未完)

    <body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - Ajax - 读取XML文件</nav&g ...

  5. Qt Installer Framework翻译(8)

    好了,到这里翻译就结束了.各位可以下载源码,结合examples示例,使用repogen和binarycreator好好实操一下,就能掌握基础用法了.祝各位使用顺利. 官方文档网址:https://d ...

  6. [Violet]天使玩偶/SJY摆棋子 [cdq分治]

    P4169 [Violet]天使玩偶/SJY摆棋子 求离 \((x,y)\) 最近点的距离 距离的定义是 \(|x1-x2|+|y1-y2|\) 直接cdq 4次 考虑左上右上左下右下就可以了-略微卡 ...

  7. P5048 [[Ynoi2019模拟赛]Yuno loves sqrt technology III]

    为什么我感觉这题难度虚高啊-- 区间众数的出现次数- 计算器算一下 \(\sqrt 500000 = 708\) 然后我们发现这题的突破口? 考虑分块出来[L,R]块的众数出现个数 用 \(\text ...

  8. R语言读写数据

    R语言读写数据 一般做模型的时候,从外部的excel中读入数据,我现在常用的比较多的是read_csv(file) 读入之前先把excel数据转化成.csv格式 同样的把结果输出来的时候用的是writ ...

  9. Coxeter积分计算

    \begin{align*}&\int_0^{\frac{\pi}{3}}{\arccos \left( \frac{1-\cos x}{\text{2}\cos x} \right) dx} ...

  10. 记录 Docker 的学习过程 （安装基础篇）

    docker 通过内核来实现 特点是效率高 1. centos7 三台(推荐2c 4g 最低 1c1g)2. 关闭防火墙 selinux3. 做好主机名解析,三台能互相ping通主机名host参考文件 ...