首页用html给我写个无极灯光控制环，用来控制esp8266的灯的亮度

用html给我写个无极灯光控制环，用来控制esp8266的灯的亮度

时间: 2024-03-04 09:49:09 浏览: 55

以下是一个简单的 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。

阅读全文