JavaScript中开关灯案例展示

今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。

代码展示，

需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置；

<style>.hover {background-color: black;}body {background-color: yellow;}.hover1{background-color: aqua;}.hover2{background-color: red;}.hover3{background-color: green;}.hover4{background-color: orchid;}.hover5{background-color: blue;}</style>
</head><body ><button id="on-off">关灯</button><button id="cut">点击跑马灯</button><script>var Switch = document.getElementById('on-off');var bodys = document.body;var flag = false;Switch.onclick = function () {flag = !flagif (flag) {bodys.className = 'hover'Switch.innerHTML = '开灯'}else {bodys.className=''Switch.innerHTML='关灯'}}
</script>
</body>

在html中添加一个按钮标签（button）。

因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源

body元素较特殊，直接用document.body就可以获取到

获取完，给按钮添加点击事件属性（onclick）

重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断，首先声明一个变量把false赋值给他，点击后让结果为非false，也就是true，

做判断，结果为真，执行点击后要实现需求，结果为假，点击下一次时要把效果为空“”null

按钮内容改变，这样基本就可以了

效果图点击qian

点击后

拓展：我在这里加了一个简单的跑马灯，就是点击一次变次色，需要用到随机数绑定到classname里面

看代码


var cut=document.getElementById('cut');
var flag=false;
cut.onclick=function(){flag=!flagif(flag){var num=Math.floor(Math.random()*5+1)bodys.className = 'hover'+num;}else{bodys.className=''}
}

就可以了

JavaScript中开关灯案例展示相关推荐

javaScript中createElement案例
javaScript中createElement案例 <!DOCTYPE html> <html> <head> <meta charset="UT ...
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
JavaScript实例之相册功能中单图放大展示
JavaScript实例之相册功能中单图放大展示源码: <!DOCTYPE html> <html lang="en"> <head>< ...
JavaScript中的event讲解及一些常见案例
JavaScript中的event就是发生在dom元素上的事件,你也许已经使用过不少dom事件,但是event对象在js中有很多强大并且常用的功能.本文将讲解部分常用event的属性方法. 目录 ev ...
解析面试常问题之JavaScript中的闭包概念及应用，顺便普及一下大家口中常说的内存泄漏问题
JavaScript中的闭包是一个面试中经常被考到的问题,大家可能都对这个概念多多少少都有一些模糊的概念或者一点都不了解,那么今天就来给大家讲解一下. 公众号:前端印象不定时有送书活动,记得关注~ ...
javaScript简单项目案例
js简单案例案例一:完成多分支案例"年龄层判断"(代码和效果图). 案例二:完成"prompt()方法及动态输入实现矩形周长面积计算"的案例(代码和效果图). ...
网络编程-JavaScript中发送网络请求汇总
文章目录 1.前后端分离优势 2.HTTP协议的解析 2.1 HTTP的介绍 2.2 HTTP的组成 2.3 HTTP的版本 2.4 HTTP请求方式 2.5 HTTP请求头字段 2.6 HTTP响应 ...
JS基础-开关灯案例
要达到的效果图展示初始状态点击关灯之后变为再点开灯又变为第一个状态. 整体思路:首先设置初始的状态body的背景色为白色,按钮中的文字为关灯,初始状态默认是开着灯的,然后设置一个初始的flag变 ...

JavaScript中开关灯案例展示

JavaScript中开关灯案例展示相关推荐

最新文章

热门文章