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

 <!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 386 字典序排数

    386. 字典序排数 给定一个整数 n, 返回从 1 到 n 的字典顺序. 例如, 给定 n =1 3,返回 [1,10,11,12,13,2,3,4,5,6,7,8,9] . 请尽可能的优化算法的时 ...

  2. springboot集成mybatis(逆向工程),热部署以及整合Swagger2

    本文是作者原创,版权归作者所有.若要转载,请注明出处. springboot集成mybatis和mybatis-generator插件 1.新建Springboot项目(略) 2.导入相关依赖 < ...

  3. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  4. iOS －App主流框架UINavigationController && UITabBarController的简单使用

     一个iOS app几乎没有由一个控制器组成,除非这个app非常简单.       当app中有多个控制器的时候,就需要对这些控制器进行管理,用1个控制器去管理其他多个控制器:       如图所示: ...

  5. 使用Json框架解析遇到Java关键字时的解决方案

    当Json数据中的key为Java关键字时,在定义实体类的时候不能对该字段进行声明,所以需要对字段进行特殊处理 使用Gson解析 在与Java关键字冲突的字段加上@SerializedName注解 @ ...

  6. JVM中堆的介绍

    一.堆的概述 一个JVM实例只有一个堆内存,堆也是Java内存管理的核心区域,堆在JVM启动的时候创建,其空间大小也被创建,是JVM中最大的一块内存空间,所有线程共享Java堆,物理上不连续的逻辑上连 ...

  7. Node第三方模块

    node第三方模块集合 1.nrm 切换npm下载的镜像地址 nrm ls   查看可用镜像 nrm use +镜像名 2.nodemon 在控制台nodenom替代node命令执行nodejs文件, ...

  8. 两条命令实现nodejs快速安装

    操作系统: debian, ubuntu, fedora 当前版本: v14.4.0 一键安装命令: curl -sL https://deb.nodesource.com/setup_14.x | ...

  9. 前端Javascript效果汇总

    1.DOM原生动态加载js <script type="text/javascript"> function loadJs(){ //得到html的头部dom var ...

  10. 为什么要使用Mybatis-现有持久化技术的对比

    1)JDBC SQL 夹在Java代码块里,耦合度高导致硬编码内伤 维护不易且实际开发需求中SQL有变化,频繁修改的情况很多 2)Hibernate 和 JPA 长难复杂SQL, 对于Hibernat ...