![cover](https://img-blog.csdnimg.cn/c38fcd5de2e74704827659589c53f5fe.png)
点击开关按钮,js实现电灯开关效果
js实现开关灯效果
·
初识js,跟大家分享js实现电灯开关灯效果的具体代码,利用简单的html+js模拟电灯开关的小案例。
首先进行案例分析:
1.获取图片属性
2.判断变量的值
3.点击时切换图片
通过点击按钮实现电灯开关
以下是两张需要的图片,接下来添加html内容。
1.创建一个div,把亮的灯泡图片放入div,加入一个button按钮开关
<body>
<div class="box">
<img id="img1" src="./img/on.png" height="180" width="109"/> <br>
<button onclick="openOrClose()" >开/关</button>
</div>
</body>
2.设置js,定义一个变量。
首先获取元素
设置一个旗子f=true,true表示开,false表示关
判断变量的值来切换图片如果为ture则图片为亮的等,false为暗的灯。
<script>
var img1 = document.getElementById("img1");
var f=true;//true表示开,false表示关
function openOrClose(){
if(f){
img1.src="./img/off.png"
f=false
}else {
img1.src="./img/on.png"
f=true
}
}
</script>
效果如下:
开关灯
另一种方法是js中的绑定点击事件来实现开关灯的效果,这个是实现页面整体变色的简易开关灯:
代码如下:
1.同样搭建好html样式,设置button按钮用来绑定点击事件
2.获取元素,同样设置一个变量,给button按钮设置绑定事件。
<!-- 页面开关灯 -->
<button type="button" class="btn">关灯</button>
<script>
//获取元素
var btn = document.querySelector('.btn');
var bd = document.body;
//这里我们要先定义一个变量,给变量一个值为false;
var flag = false;
//给button按钮绑定点击事件
btn.onclick = function() {
flag = !flag
if (flag) {
bd.style.backgroundColor = 'black';
this.innerHTML = '开灯';
} else {
bd.style.backgroundColor = 'white';
this.innerHTML = '关灯';
}
}
</script>
效果如下:
页面开关灯效果
以上就是利用ls实现简易开关灯效果的小案例!大家可以试一试!
更多推荐
所有评论(0)