<input type="range" min="0" max="100" value="0" id="brightness"> <p>Button Status: HIGH</p>怎么把Button Status: HIGH变成滑条当前的value值。滑动的时候数据要实时变
时间: 2023-07-06 15:36:31 浏览: 43
您可以使用 JavaScript 监听滑条的 `input` 事件,并在事件触发时将滑条的当前值更新到按钮状态文本中。具体实现如下:
```html
<input type="range" min="0" max="100" value="0" id="brightness">
<p id="button-status">Button Status: 0</p>
<script>
var brightnessSlider = document.getElementById("brightness");
var buttonStatus = document.getElementById("button-status");
brightnessSlider.addEventListener("input", function() {
buttonStatus.innerHTML = "Button Status: " + this.value;
});
</script>
```
这里,我们首先获取了滑条和按钮状态元素的引用,然后使用 `addEventListener` 方法监听滑条的 `input` 事件。每当滑条的值发生变化时,回调函数就会被触发,我们在回调函数中将滑条的当前值更新到按钮状态文本中,从而实时显示滑条的值。
相关问题
<input type="range" min="0" max="100" value="0" id="brightness"> <p>Button Status: HIGH</p>怎么把Button Status: HIGH变成滑条当前的value值
您可以使用JavaScript来更新按钮状态文本的值,具体实现如下:
```html
<input type="range" min="0" max="100" value="0" id="brightness" onchange="updateButtonStatus()">
<p id="button-status">Button Status: 0</p>
<script>
function updateButtonStatus() {
var brightness = document.getElementById("brightness").value;
var buttonStatus = document.getElementById("button-status");
buttonStatus.innerHTML = "Button Status: " + brightness;
}
</script>
```
当滑条的值发生改变时,`onchange`事件将会触发`updateButtonStatus()`函数,该函数获取当前滑条的值,并将其更新到按钮状态文本中。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>ESP8266 LED Control</title> <style> </style></head><body> <h1>ESP8266 LED Control</h1> <input type="range" min="0" max="255" value="0" id="brightnessSlider" oninput="onput_function();"> <p id="brightnessValue">Brightness: 0</p> <script> function onput_function() {var slider = document.getElementById("brightnessSlider"); var output = document.getElementById("brightnessValue"); output.innerHTML = "值为" + this.value; }); function sendBrightness(value) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log("Brightness set to: " + value); } }; xhttp.open("GET", "/brightness?value=" + value, true); xhttp.send(); } </script>body></html>把这段代码整理成网页格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ESP8266 LED Control</title>
<style>
</style>
</>
<body>
<h1>ESP8266 LED Control</h1>
<input type="range" min="0" max="255" value="0" id="brightnessSlider" oninput="onput_function();">
<p id="brightnessValue">Brightness: 0</p>
<script>
function onput_function() {
var slider = document.getElementById("brightnessSlider");
var output = document.getElementById("brightnessValue");
output.innerHTML = "值为" + this.value;
});
function sendBrightness(value) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Brightness set to: " + value);
}
};
xhttp.open("GET", "/brightness?value=" + value, true);
xhttp.send();
}
</script>
</body>
</html>
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)