用于旋转图像的Javascript小书签无法起作用

Question

我一直在研究JavaScript小书签，以根据各种研究来旋转图像。但是，完成的小书签无法正确执行任何操作。它甚至不会引发错误。

我已经在控制台中浏览了它，似乎当我定义某个变量时，它会自动将其设置为NaN。但是，即使我事先在控制台中将该变量设置为数字，它仍然仍然无法正常工作。

我的代码如下：

javascript:function img_find() {var imgs = document.querySelectorAll("img");return imgs;} var deg; var images = img_find(); deg = (deg + 90) % 360; for (var i = 0; i < images.length; i++) {(function(){images[i].style = 'tranform:rotate(' + deg + 'deg)'})()}

Answer 1

这里您有无效的代码，您正在将整个样式对象重新分配给一个字符串。

images[i].style = 'tranform:rotate(' + deg + 'deg)'

使用let进行循环作用域，而不是将内部包裹在闭合中。

for (let i = 0; i < images.length; i++) {
  images[i].style.tranform = 'rotate(' + deg + 'deg)'
}

您应该使用IIFE运行小书签。

((imgs, deg, step, ms, max) => {
  for (let i = 0; i < max; i++) {
    setTimeout(() => {
      deg = (deg + step) % 360;
      [...imgs].forEach(img => {
        img.style.transform = `rotate(${deg}deg)`;
      })
    }, ms * i);
  }
})(document.querySelectorAll('img'), 0, 45, 250, 100);

<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/200/200" />

---

缩小的“脚本”版本

注：我必须将360作为p传递给函数，因为%36被转义为6。

javascript:((e,d,s,t,m,p)=>{for(let i=0;i<m;i++)setTimeout(()=>{d=(d+s)%p,[...e].forEach(e=>{e.style.transform=`rotate(${d}deg)`})},t*i)})(document.querySelectorAll('img'),0,45,250,100,360);