为什么这个设定的间隔只工作一次？

Question

好的，所以，在我的网站上，我有三个长长的全景图片在彼此之上。我要他们每秒钟都往左跑100便士。以下是我尝试过的：

var panoramas = document.getElementsByClassName("pano");

setInterval(scoot, 1000);

function scoot(){ 
    for (i=0; i < panoramas.length; i++){ 
        panoramas[i].style.left = panoramas[i].style.left - 100; 
    }
}

但结果是，他们把100便士推到左边一次，然后停下来。我尝试了一些console.logs，所以我知道它是循环的，但它们不会移动超过一次。

Answer 1

panoramas[i].style.left不从CSS文件读取样式。它返回一个带有单位的字符串，并期望一个字符串包含一个单位。

​

var panoramas = document.getElementsByClassName("pano");

setInterval(scoot, 1000);

function scoot() {
  for (i = 0; i < panoramas.length; i++) {
    panoramas[i].style.left = panoramas[i].style.left.replace(/\d+/, p1 => +p1 - 100);
  }
}

.pano {
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
}

<div class="pano" style="left: 200px; top: 50px;"></div>
<div class="pano" style="left: 250px; top: 100px;"></div>
<div class="pano" style="left: 300px; top= 150px;"></div>

​