用html给我写个无极灯光控制环,用来控制esp8266的灯的亮度
时间: 2024-03-04 15:49:09 浏览: 51
基于安卓和ESP8266的室内灯光控制器设计-毕业论文
以下是一个简单的 HTML 代码,用于创建一个无极灯光控制环,可以通过拖动滑块来控制 ESP8266 灯的亮度。
```html
<!DOCTYPE html>
<html>
<head>
<title>ESP8266灯光控制</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#circle {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #f1f1f1;
position: relative;
}
#slider {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #4286f4;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
</style>
</head>
<body>
<h1>ESP8266灯光控制</h1>
<div id="circle">
<div id="slider"></div>
</div>
<script>
var circle = document.getElementById("circle");
var slider = document.getElementById("slider");
slider.onmousedown = function(event) {
event.preventDefault();
document.onmousemove = function(event) {
event.preventDefault();
var x = event.clientX - circle.getBoundingClientRect().left - circle.offsetWidth/2;
var y = circle.offsetHeight/2 - (event.clientY - circle.getBoundingClientRect().top);
var angle = Math.atan2(y, x) * 180 / Math.PI + 90;
if (angle < 0) {
angle += 360;
}
slider.style.top = 50 - 50 * Math.sin(angle * Math.PI / 180) + "%";
slider.style.left = 50 + 50 * Math.cos(angle * Math.PI / 180) + "%";
var brightness = Math.round(angle / 3.6);
console.log("Brightness: " + brightness);
// TODO: 发送 ESP8266 控制指令
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
</body>
</html>
```
需要注意的是,这个代码只是一个 HTML 页面,它只能通过 JavaScript 发送控制指令给 ESP8266。你需要在 JavaScript 代码中添加相应的功能,以便将灯的亮度控制指令发送给 ESP8266。
阅读全文