如何在HTML中复制滑块（esp8266）_Html_Slider_Esp8266_Arduino Esp8266

如何在HTML中复制滑块（esp8266）

html

如何在HTML中复制滑块（esp8266）,html,slider,esp8266,arduino-esp8266,Html,Slider,Esp8266,Arduino Esp8266,我正在用ESP8266做一些事情，我需要一些关于它的HTML部分的帮助。我要复制1个滑块：代码是： client.println("<!DOCTYPE html><html>"); client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"); client.pr

我正在用ESP8266做一些事情，我需要一些关于它的HTML部分的帮助。我要复制1个滑块：代码是：

  client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
            client.println(".slider { width: 300px; }</style>");
            client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");

            // Web Page
            //client.println("</head><body><h1>ESP32 with Servo</h1>");
            client.println("<p>Start Temperature: <span id=\"servoPos\"></span></p>");          
            client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");

            client.println("<script>var slider = document.getElementById(\"servoSlider\");");
            client.println("var servoP = document.getElementById(\"servoPos\"); servoP.innerHTML = slider.value;");
            client.println("slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }");
            client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
            client.println("$.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");

            client.println("</body></html>");     

            //GET /?value=180& HTTP/1.1
            if(header.indexOf("GET /?value=")>=0) {
              pos1 = header.indexOf('=');
              pos2 = header.indexOf('&');
              valueString = header.substring(pos1+1, pos2);

              //Rotate the servo
              //myservo.write(valueString.toInt());
            //  Serial.println(valueString); 
            }   
  } 
        }

    // Clear the header variable
    header = "";

client.println（“”）；
客户。println（“”）；
客户。println（“”）；
//CSS设置开/关按钮的样式
//可以随意更改背景颜色和字体大小属性以符合您的偏好
println（“正文{文本对齐：居中；字体系列：\'Trebuchet MS\”，Arial；左边距：自动；右边距：自动；}”）；
client.println（“.slider{width:300px；}”）；
客户。println（“”）；
//网页
//client.println（“带伺服的ESP32”）；
client.println（“开始温度：”）；
客户。println（“”）；
client.println（“var slider=document.getElementById（\“servoSlider\”）；”；
client.println（“var servoP=document.getElementById（\“servoPos\”）；servoP.innerHTML=slider.value；”；
println（“slider.oninput=function（）{slider.value=this.value；servoP.innerHTML=this.value；}”）；
client.println（$.ajaxSetup（{timeout:1000}）；函数伺服（pos）{）；
client.println（“$.get（\”/？value=\“+pos+\”&\”；{Connection:close}；}”）；
客户。println（“”）；
//GET/？value=180&HTTP/1.1
if（header.indexOf（“GET/？value=）>=0）{
pos1=header.indexOf（'='）；
pos2=header.indexOf（'&'）；
valueString=标题.子字符串（pos1+1，pos2）；
//旋转伺服机构
//write（valueString.toInt（））；
//Serial.println（valueString）；
}   
} 
}
//清除header变量
标题=”；

这给了我一个滑块，但我想要另一个，用于控制不同的东西，在不同的变量下。因为我不太懂HTML，所以我尝试更改一些变量并自己复制代码，但没有成功。滑块工作，但我得到了很多错误

第二个（独立）滑块

client.println（“启动传感器2:”；
客户。println（“”）；
client.println（“var slider2=document.getElementById（\“ServorSlider2\”）；”；
client.println（“var servoP2=document.getElementById（\“servoPos2\”）；servoP2.innerHTML=slider2.value；”；
println（“slider2.oninput=function（）{slider2.value=this.value；servoP2.innerHTML=this.value；}”）；

rest代码中未显示的功能伺服（pos）（我猜）必须复制的还是
要停止猜测并帮助您，请添加以下信息：
源代码esp8266，如果是标准示例，则输入ino文件的名称

错误类型-编译期间，在浏览器控制台上，在串行端口上？

第二个（独立）滑块

client.println（“启动传感器2:”；
客户。println（“”）；
client.println（“var slider2=document.getElementById（\“ServorSlider2\”）；”；
client.println（“var servoP2=document.getElementById（\“servoPos2\”）；servoP2.innerHTML=slider2.value；”；
println（“slider2.oninput=function（）{slider2.value=this.value；servoP2.innerHTML=this.value；}”）；

错误类型-编译期间，在浏览器控制台上，在串行端口上？

Hi。很抱歉延迟回复，我的互联网提供商在我所在的地区遇到了一些问题。。。。。整个代码是Hi。很抱歉延迟回复，我的互联网提供商在我所在的地区遇到了一些问题。。。。。整个代码是

       client.println("<p>Start Sensor2: <span id=\"servoPos2\"></span></p>");          
        client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider2\" onchange=\"servo2(this.value)\" value=\""+valueString+"\"/>");

        client.println("<script>var slider2 = document.getElementById(\"servoSlider2\");");
        client.println("var servoP2 = document.getElementById(\"servoPos2\"); servoP2.innerHTML = slider2.value;");
        client.println("slider2.oninput = function() { slider2.value = this.value; servoP2.innerHTML = this.value; }");