js完成开关灯的效果代码
时间: 2024-04-29 18:24:46 浏览: 7
好的,以下是一个基本的开关灯效果的代码:
HTML代码:
```html
<div id="light" class="off"></div>
<button id="switch">开关灯</button>
```
CSS代码:
```css
#light {
width: 50px;
height: 50px;
background-color: #FFF;
border-radius: 50%;
}
.on {
background-color: #FFD700;
}
.off {
background-color: #000;
}
```
JavaScript代码:
```javascript
var light = document.getElementById('light');
var button = document.getElementById('switch');
button.addEventListener('click', function() {
if (light.className === 'off') {
light.className = 'on';
} else {
light.className = 'off';
}
})
```
当点击按钮时,这段代码会切换灯的状态,改变零件的CSS 类从“off”到“on”或者从“on”到“off”,这样灯就会从开到关或者从关到开。
相关问题
帮忙写出微信小程序控制开关灯的代码
好的,以下是一个简单的微信小程序控制开关灯的代码示例:
1. 在 wxml 文件中添加开关组件和按钮组件,如下:
```
<view class="container">
<switch checked="{{isOn}}" bindchange="switchChange"></switch>
<button type="primary" size="default" bindtap="clickButton">{{buttonText}}</button>
</view>
```
2. 在 js 文件中定义变量和函数:
```
Page({
data: {
isOn: false, // 灯的开关状态
buttonText: '打开灯' // 按钮文本
},
switchChange: function(e) {
this.setData({
isOn: e.detail.value, // 更新灯的开关状态
buttonText: e.detail.value ? '关闭灯' : '打开灯' // 更新按钮文本
})
},
clickButton: function() {
// 根据灯的开关状态控制灯的打开和关闭
if (this.data.isOn) {
// 发送关闭灯的指令
// 发送请求的代码
} else {
// 发送打开灯的指令
// 发送请求的代码
}
}
})
```
3. 在发送请求的代码中,可以使用微信小程序提供的 wx.request 方法来发送请求,具体如下:
```
wx.request({
url: 'https://xxx.xxx.xxx', // 请求的地址
method: 'POST', // 请求的方法
data: {
isOn: this.data.isOn // 发送灯的开关状态
},
success: function(res) {
console.log(res.data) // 输出请求返回的结果
},
fail: function(err) {
console.log(err) // 输出请求失败的错误信息
}
})
```
需要注意的是,以上代码仅为示例,具体实现需要根据实际需求进行调整。同时,在真实的场景中,还需要考虑网络请求的安全性等问题。
js开关灯案例
以下是一个基于JavaScript的简单开关灯案例:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>开关灯</title>
</head>
<body>
<button onclick="switchLight()">开关灯</button>
<img id="myImage" src="light_off.png">
<script src="switchLight.js"></script>
</body>
</html>
```
JavaScript部分(switchLight.js):
```
function switchLight() {
var image = document.getElementById("myImage");
if (image.src.match("light_off")) {
image.src = "light_on.png";
} else {
image.src = "light_off.png";
}
}
```
在这个案例中,我们使用了一个按钮和一个图片。当按钮被点击时,我们调用了`switchLight()`函数。这个函数会获取图片元素,然后检查它的`src`属性是否包含“light_off”字符串。如果包含,就将它的`src`属性修改为“light_on.png”,灯就亮了;如果不包含,就将它的`src`属性修改为“light_off.png”,灯就灭了。