首先,创建一个html页面,添加一个div盒子,用css设置相应的样式,用js获取盒子的元素,通过点击事件,设置body的背景颜色,用if..else来判断当什么状态设置相应的颜色,(swith...case同理)
 
break:跳出当前循环
continue:结束本次循环
 
.css
<style type="text/css">
*{
margin:;
padding:;
}
html,body{
width:100%;
height:100%;
background: white;
}
#box{
width:100px;
height:100px;
margin:50px auto;
background: red;
text-align: center;
line-height: 100px;
color:white;
cursor: pointer;
}
</style>

.html

<div id="box">点我啊</div>

.js

<script>
// 操作谁,就要先获取谁
var oBox = document.getElementById("box");
// 给oBox这个元素绑定一个点击事件;当点击这个盒子的时候,触发后面的function里面的代码;
// 获取body 元素:document.body
console.log(document.body);
oBox.onclick = function () {
// 当页面现在是白色时,让它变成黑色,
// 如果本来就是黑色,让它变成白色;
// 获取
//{style:{background:""}}
var curBg = document.body.style.background;
console.log(curBg);
/* if(curBg=="" || curBg=="white"){
console.log(100);
document.body.style.background = "black";
}else if(curBg=="black"){
console.log(200);
document.body.style.background = "red";
}else if(curBg==="red"){
document.body.style.background = "white";
}*/
switch (curBg){
case "":
document.body.style.background = "black";
break;
case "black":
console.log("red");
document.body.style.background = "red";
break;
case "red":
document.body.style.background = "white";
break;
case "white":
document.body.style.background = "";
break;
}
}
// 黑白
// 红-->黄色-->蓝色--> 黑色-->红
// 先用if else 在用switch case; </script>
 

if-else案例–开关灯的更多相关文章

  1. webAapi

    学习目标: 掌握API和Web API的概念 掌握常见浏览器提供的API的调用方式 能通过Web API开发常见的页面交互功能 能够利用搜索引擎解决问题 typora-copy-images-to: ...

  2. DOM——属性操作

    属性操作 非表单元素的属性 href.title.id.src.className  var link = document.getElementById('link'); console.log(l ...

  3. jQuery----操作类样式(依托开关灯案例)

    在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...

  4. JS---DOM---点击操作---part1---20个案例

    点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...

  5. 离线语音Snowboy热词唤醒+ 树莓派语音交互实现开关灯

    离线语音Snowboy热词唤醒 语音识别现在有非常广泛的应用场景,如手机的语音助手,智能音响(小爱,叮咚,天猫精灵...)等. 语音识别一般包含三个阶段:热词唤醒,语音录入,识别和逻辑控制阶段. 热词 ...

  6. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  7. SQL Server内存遭遇操作系统进程压榨案例

    场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...

  8. solr_架构案例【京东站内搜索】(附程序源代码)

    注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...

  9. Yeoman 官网教学案例:使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

随机推荐

  1. UIWebView代码注入时机与姿势

    一个奇怪的业务场景,引发的胡乱思考 问题其实不难解决,只是顺着这个问题,发散出了一些有意思的东西 本文旨在讨论UIWebView,WKWebView有自己的机制,不用这么费劲 我们的业务最大的最重要的 ...

  2. Ubuntu18.04更换国内源(阿里,网易,中科大,清华等源)

    1.备份 备份/etc/apt/sources.list文件 mv /etc/apt/sources.list /etc/apt/sourses.list.backup 2.新建 新建/etc/apt ...

  3. Python 回溯算法

    回溯算法(试探法) 在搜索尝试过程中寻找问题的解,当发现已不满足求解条件时,就"回溯"返回,尝试别的路径.回溯法是一种选优搜索法,按选优条件向前搜索,以达到目标.但当探索到某一步时 ...

  4. ng2-translate 国际化中 配置文件添加变量

    1. <li> {{ 'Withdrawmoney.tipsP1' | translate:{value:assets} }} </li> 2. "Withdrawm ...

  5. HTML常用基础标签

    HTML常用基础标签 带有语义的标签 <em> </em> 强调 <strong> </strong> 比em强调级别高 <abbr> &l ...

  6. php 的文件操作类

    <?php header('Content-type:text/html;charset=utf8'); Class FILE { private static $path; private s ...

  7. vue静态文件处理

    前言: vue-cli在创建项目的时候, 会创建两个存放静态文件的目录, 1. src/assets 2. /static 这两个文件夹在项目中的作用和区别是什么, 我们今天就来看一下 静态资源处理: ...

  8. Linux下如何查看系统启动时间和运行时间以及安装时间

    1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.00 2.查看/proc/uptime文件计算 ...

  9. iOS之UIApplicatio、AppDelegate

    UIApplication,代表的是整个应用做的事,因此每个程序只能有一个,系统使用的是单例模式,就是[UIApplication sharedApplication]来得到一个实例. 这个单例实例是 ...

  10. 【JavaScrpt】JS之数组去重

    var arr = [] var peoples = [ {id:1,name:'wang'}, {id:2,name:'zhang'}, {id:2,name:'zhang'}, ] for(let ...