-2

我正在寻找一种方法来获取 2 个 HTML 滑块的值并将它们附加到 url（然后将用于更改图像源）。

这是我目前正在使用的：

    var localhost = "http://localhost:8080";
    var chemin = "/cam_pre/";
    var zoom_val = document.getElementById("zoom_val").value;
    document.getElementById("zoom_val").innerHTML=zoom_val;
    var rot_val = document.getElementById("rot_val").value;
    document.getElementById("rot_val").innerHTML=rot_val;
    document.getElementById("img").src =localhost+chemin+"camera_"+zoom_val+"_"+rot_val+ ".png";
    function showzoom(newVal){
          document.getElementById("zoom_val").innerHTML=newVal;
          document.getElementById("img").src = document.getElementById("img").src = localhost+chemin+"camera_"+newVal+"_"+rot_val+ ".png";
        }
    function showrot(newVal){
          document.getElementById("rot_val").innerHTML=newVal;
          document.getElementById("img").src = localhost+chemin+"camera_"+zoom_val+"_"+newVal+ ".png";
        }
<figure>
        <img id="img" alt="" src="http://localhost:8080/service/camera_init.png">
      </figure>
    <form action="/service" method="GET">
      <fieldset>
         <legend>Gérez les paraméttres de la caméra:</legend>
           <label for="zoom_val">Zoom:</label>
            Loin <input type="range" name="zoom_val" id="zoom_val" min="0.5" max="2" step="0.5" oninput="showzoom(this.value)" onchange="showzoom(this.value)"> Proche<br>
           <label for="rot_val">Rotation:</label>
            0 <input type="range" name="rot_val" id="rot_val" min="0" max="1.5" step="0.5" oninput="showrot(this.value)" onchange="showrot(this.value)"> Pi/2<br>
    </fieldset>
    </form>

我对 HTML 和 Javascript 完全陌生，所以请耐心等待 =)。

4

2 回答 2

0

JavaScript 通过 ID 获取输入值

document.getElementById('ID').value;

JavaScript 将具有给定 ID 的输入值附加到字符串

myVar = "string" + document.getElementById('ID').value;

JavaScript 在给定 ID 的情况下更改图像元素源属性

document.getElementById("imageID").src="/newImageSource.png";
于 2018-06-14T15:21:11.123 回答
0

您的<script>标签应位于 HTML 文件的末尾。由于您的 javascript 未包含在函数中，因此它会立即从滑块中获取值并更新图像源。（这可能是你想要的，我不确定）

然后，当每个滑块更改时，您调用一个更新链接的函数。我认为您不需要，oninput="showzoom(this.value)"但您肯定需要 onchange() 事件。

同样在showZoom()函数中你有这条线

document.getElementById("img").src = document.getElementById("img").src = localhost+chemin+"camera_"+newVal+"_"+rot_val+ ".png";;

应该是

document.getElementById("img").src = localhost + chemin + "camera_" + newVal + "_" + rot_val + ".png";

这个最终的 JS 脚本对我来说很好用：

<script>
    var localhost = "http://localhost:8080";
    var chemin = "/cam_pre/";
    var zoom_val = document.getElementById("zoom_val").value;
    var rot_val = document.getElementById("rot_val").value;

    document.getElementById("img").src =localhost+chemin+"camera_"+zoom_val+"_"+rot_val+ ".png";

    console.log(zoom_val, rot_val);

    function showzoom(newVal) {
          document.getElementById("zoom_val").innerHTML = newVal;
          document.getElementById("img").src = localhost + chemin + "camera_" + newVal + "_" + rot_val + ".png";

          console.log(document.getElementById("img").src);
    }

    function showrot(newVal) {
          document.getElementById("rot_val").innerHTML=newVal;
          document.getElementById("img").src = localhost + chemin + "camera_" + zoom_val + "_" + newVal + ".png";
          console.log(document.getElementById("img").src);
    }
</script>
于 2018-06-14T15:34:43.867 回答