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

 <!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 42 接雨水

    42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这 ...

  2. Pycharm添加Python文件模板

    #!/usr/bin/env python# -*- encoding: UTF-8 -*-'''=================================================@P ...

  3. css3中的skew(skewX,skewY)用法

    这是html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. Vue中解决新脚手架3创建项目的移动端双击屏幕放大，双手拉动放大的方法

    替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...

  5. 氦元素 - CUBA 应用程序新样式主题

        CUBA 框架一直以来定位的目标是业务系统的开发.业务系统的界面通常是给后台员工使用的,看重的是功能实现.多年来,界面外观和样式并不是后台管理系统的主要关注点,界面中的控件也更紧凑,唯一的原因 ...

  6. Centos7 systemctl添加自定义系统开机服务

    Centos7的服务systemctl脚本存放在: /usr/lib/systemd/ 有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存下系统服务里,即:/usr/lib ...

  7. 【转载】自动化魔方求解器的Bug——选择合适的色彩空间

    目录 1. 准备工作-- 2. RGB颜色空间 3. LAB色彩空间 4. YCrCb色彩空间 5. HSV色彩空间 Color spaces in OpenCV (C++ / Python) 几天前 ...

  8. [AHOI2017/HNOI2017]单旋

    题目   点这里看题目. 分析   最妙的地方在于,这道题其实是用一种数据结构模拟另一种数据结构!   我们需要维护深度和树的结构,以下对于每个操作进行分别讨论. 插入一个新节点   可以发现,这个新 ...

  9. Mariadb 10.14 mysqldump error: 1049

    Mariadb 10.14 mysqldump error: 1049 Table of Contents 1. 错误信息 2. 解决方法 1 错误信息 执行表导出: mysqldump -uroot ...

  10. Flume-0.9.4和Hbase-0.96整合

    这几天由于项目的需要,需要将Flume收集到的日志插入到Hbase中,有人说,这不很简单么?Flume里面自带了Hbase sink,可以直接调用啊,还用说么?是的,我在本博客的<Flume-1 ...