我正在使用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 = "";
这给了我一个滑块,但是我想要另一个在不同的变量下控制其他事物。由于我不太了解HTML,因此我尝试更改一些变量并自己复制代码,但没有成功。滑块可以工作,但是出现很多错误。
第二(独立)滑块
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; }");
未显示的其余代码中的伺服功能(pos)(我的猜测)必须是重复或???为了停止猜测和为您提供帮助,请添加以下信息:源代码esp8266,或者如果是标准示例,则ino文件的名称
错误类型-在编译期间,在浏览器控制台上,在串行端口上?