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

 <!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实现 蓝桥杯VIP 算法训练 阶乘末尾

    问题描述 给定n和len,输出n!末尾len位. 输入格式 一行两个正整数n和len. 输出格式 一行一个字符串,表示答案.长度不足用前置零补全. 样例输入 6 5 样例输出 00720 数据规模和约 ...

  2. Java实现 LeetCode 295 数据流的中位数

    295. 数据流的中位数 中位数是有序列表中间的数.如果列表长度是偶数,中位数则是中间两个数的平均值. 例如, [2,3,4] 的中位数是 3 [2,3] 的中位数是 (2 + 3) / 2 = 2. ...

  3. java实现第六届蓝桥杯立方体自身

    立方变自身 题目描述 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 - 请你计算包括1,8, ...

  4. Ansible facts详解

    Ansible是一个系列文章,我会尽量以通俗易懂.诙谐幽默的总结方式给大家呈现这些枯燥的知识点,让学习变的有趣一些. Ansible系列博文直达链接:Ansible入门系列 前言 如果你跟着前面的文章 ...

  5. mybatis源码解析-日志适配器

    1.为什么需要使用适配器?    集成第三方日志组件,屏蔽日志组件底层实现,统一提供写日志的接口. 2.什么是适配器模式 定义:将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法 ...

  6. 红楼梦 + 写入 MySQL

    import requests import re import pymysql from bs4 import BeautifulSoup conn = pymysql.Connect(host=' ...

  7. Math.round方法、String实例化

    math.round(11.5)==12 传入的值是11.5,通过math.round方法进行四舍五入变成12(把一个数字舍入为最接近的整数) string s = new string(＂xyz＂) ...

  8. 多线程实现tcp聊天服务器

    多线程tcp  server & client tcp服务端(多线程): from socket import * from threading import Thread def clien ...

  9. [PyQt5]文件对话框QFileDialog的使用

    概述选取文件夹 QFileDialog.getExistingDirectory()选择文件 QFileDialog.getOpenFileName()选择多个文件 QFileDialog.getOp ...

  10. MSSQL2008下备份好的*.bak--->>>恢复到--->>>MSSQL2014（解决办法）

    MSSQL2008下备份好的*.bak--->>>恢复到--->>>MSSQL2014(解决办法) 在进行CTE训练时(同时也要理解下窗口函数的应用),发现不能继续 ...