描述：点击哪个，哪个就变蓝色，其余的都是粉色

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 200px;

             height: 50px;

             background-color: pink;

             margin-bottom: 10px;

         }

     </style>

 </head>

 <body>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <script>

         var boxlist=document.querySelectorAll('.box');

         for(var i=0;i<boxlist.length;i++){

             boxlist[i].onclick=function(){

                 for(var j=0;j<boxlist.length;j++){

                     boxlist[j].style.backgroundColor='pink';

                 }

                 this.style.backgroundColor='blue';

             }

         }

     </script>

 </body>

 </html>

js小案例（排他案例）的更多相关文章

  1. JS小案例：循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  2. js的继承操作案例

    js的继承操作案例 一.总结 1.要案例要求,内心中想出操作要点 二.js的继承操作案例 案例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: ...

  3. 用JS添加文本框案例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  5. 我的第一个上线小程序，案例实战篇二——LayaAir游戏开始界面开发

    不知不觉我的第一个小程序已经上线一周了,uv也稳定的上升着. 很多人说我的小程序没啥用,我默默一笑,心里说:“它一直敦促我学习,敦促我进步”.我的以一个小程序初衷是经验分享,目前先把经验分享到博客园, ...

  6. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  7. js中的经典案例--简易万年历

    js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. 【原创】Auto.js get和post 案例

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js get和post 案例 ...

  9. React.js 小书 Lesson25 - 实战分析：评论功能（四）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  10. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

随机推荐

  1. Java实现 LeetCode 488 祖玛游戏

    488. 祖玛游戏 回忆一下祖玛游戏.现在桌上有一串球,颜色有红色,黄色(Y),蓝色(B),绿色(G),还有白色(W). 现在你手里也有几个球. 每一次,你可以从手里的球选一个,然后把这个球插入到一串 ...

  2. Java实现 LeetCode 313 超级丑数

    313. 超级丑数 编写一段程序来查找第 n 个超级丑数. 超级丑数是指其所有质因数都是长度为 k 的质数列表 primes 中的正整数. 示例: 输入: n = 12, primes = [2,7, ...

  3. java实现取字母组成串

    ** 取字母组成串** A B C D中取5次,每个字母都可以重复取出,形成一个串. 现在要求,串中A出现的次数必须为偶数(0次也算偶数). 求可以形成多少种可能的串. 参考答案: 528 publi ...

  4. XStrea学习手册

    ​​ 一.前言 1.XStream官网 http://x-stream.github.io 2.XStream是什么 XStream是一个简单的基于Java的类库,用来将Java对象序列化成XML(J ...

  5. kka-typed(5) - cluster：集群节点状态监视

    akka-cluster对每个节点的每种状态变化都会在系统消息队列里发布相关的事件.通过订阅有关节点状态变化的消息就可以获取每个节点的状态.这部分已经在之前关于akka-cluster的讨论里介绍过了 ...

  6. 源码分析（5）-ArrayList、Vector和LinkedList（JDK1.8）

    一.概述 1.线程安全:ArrayList和LinkedList非线程安全的.Vector线程安全的. 2.底层数据结构:ArrayList和Vector底层数据结构是数组:LinkedList双向链 ...

  7. 使用 xshell 登录 Windows 的 linux 子系统

    1 配置 SSH Server # 卸载自带的 ssh sudo apt-get remove openssh-server # 安装 ssh sudo apt-get install openssh ...

  8. WDCP配置ThinkPHP5伪静态隐藏index.php，出现“”解决重定向次数过”问题

    站点域名的配置:xxx.com.conf server { listen 80; root /www/web/xxx_com/public_html; server_name xxx.com; ind ...

  9. Yii2.0ActiveRecord嵌套子查询（AR子查询）

    yii2.0的ActiveRecord是可以嵌套子查询的. 比如从一个子查询里面筛选数据. 首先实例化出来一个Query对象,代表子查询. $subQuery = new \yii\db\Query( ...

  10. MATLAB作图之一

    问题 在使用MATLAB当中的imagesc作图的时候,如果数据矩阵元素太少,得到的图看起来会很"粗糙"(图1).那么如何得到更为"圆润"的图像呢? A = r ...