Question

我是Javascript的新手，所以请耐心等待。假设我有这个链接：example.com/img/000.png/。它显示一个图像源，所以我将它放在一个图像标签中。 <img src="example.com/img/001.png/">。

当我按下某个键（例如right arrow）时，该链接应该（在图片标记内）更改为example.com/img/001.png/，/002.png/，/003.png/等。完全可以使用嵌入在原始HTML中的Javascript来完成这项工作吗？

到目前为止，我的想法是：

<img src=" <!-- Link generated by Javascript --> ">
<script>
    // actually pythonic pseudocode, ok
    counter = 0
    if (right arrow key pressed):
        counter = counter + 1
        counterPrep = (3-len(counter))*'0'+str(counter) 
        // ^^^ changes the link from "1" to "001"
        link = "https://www.example.com/img/"+str(counterPrep)+".png
</script>

我知道我问的问题可能不清楚，所以请随时提问。我通常使用Python，这就是为什么伪代码是如此“Pythonic”。

谢谢！

Answer 1

您可以使用名为keypress的事件检测用户的按键。

rigth箭头键的键代码为39，因此您可以执行以下操作：

＆＃13;

<img src="example.com/img/001.png" id="myImage">
<script>
var counter = 0;
document.body.addEventListener("keypress", function(e){
   if(e.keyCode==39) {
      counter ++;
      var index = (("00" + counter).slice(-3));
      var link = "https://www.example.com/img/"+index+".png";
      document.getElementById('myImage').src = link;
   }
});

</script>

＆＃13;

Answer 2

请参阅下面的代码：

document.getElementById("testBtn").onclick = function() {
  var imgSrc = document.getElementById("dynamicImg").src;
  var start = imgSrc.lastIndexOf("/") + 1, end = imgSrc.lastIndexOf("/") + 4;
  var preUrl = imgSrc.substring(0, start);
  var postUrl = imgSrc.substring(end, imgSrc.length);
  // get the fileName
  var imgName = parseInt(imgSrc.substring(start, end)) + 1;
  // convert to 000 format
  imgName = ("00" + imgName).slice(-3);
  // replace img src
  document.getElementById("dynamicImg").src = preUrl + imgName + postUrl;
  alert(document.getElementById("dynamicImg").src)
};

<img id="dynamicImg" src="example.com/img/000.png" />
<button id="testBtn">
TEST
</button>

上面的代码将使用动态网址。我尝试使用onclick按钮，但您可以更改事件ti按键。我希望这会有所帮助。

在keypress上使用javascript更改链接后缀

2 个答案: