写个html网页里面有个滑条能控制esp8266灯亮度的程序 - CSDN文库

好的，以下是一个简单的HTML网页，它包含一个滑条，可以控制ESP8266的LED灯亮度： ```html <!DOCTYPE html> <html> <head> <title>ESP8266 LED</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> body { font-family: Arial, sans-serif; } h1 { margin-top: 50px; text-align: center; } #slider-container { margin-top: 50px; width: 50%; margin-left: auto; margin-right: auto; } #slider-value { font-size: 24px; text-align: center; } </style> </head> <body> <h1>ESP8266 LED</h1> <div id="slider-container"> <input type="range" min="0" max="255" value="0" class="slider" id="brightness-slider"> <p id="slider-value">0</p> </div> <script> $(document).ready(function() { // 当滑条值改变时，发送AJAX请求 $("#brightness-slider").change(function() { var brightness = $(this).val(); $.get("/set-brightness?brightness=" + brightness, function(data, status) { // 更新亮度值 $("#slider-value").text(brightness); }); }); }); </script> </body> </html> ``` 在上面的HTML代码中，我们创建了一个包含一个滑条的HTML页面，并使用jQuery库来处理滑条值的更改。当滑条值改变时，它会发送一个AJAX请求到ESP8266的服务器，将亮度值作为查询参数发送到服务器。服务器将接收到的亮度值转换为PWM值，并将其应用于LED灯。服务器还将返回一个空响应，表示请求已成功处理。要使这个程序正常运行，你需要将ESP8266的IP地址替换为你的设备的IP地址，并将它作为URL加载到你的浏览器中。例如，如果你的ESP8266的IP地址是192.168.1.10，你需要在浏览器中输入以下URL： ``` http://192.168.1.10/ ``` 然后你就可以使用滑条来控制ESP8266的LED灯亮度了。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通