用于旋转图像的 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" />

<小时/>

缩小的“scriptlet”版本

注意:我必须将 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);