Javascript букмарклет для вращающихся изображений отказывается функционировать - PullRequest
Новая
       25

Javascript букмарклет для вращающихся изображений отказывается функционировать

0 голосов
/ 06 марта 2020

Я работал над 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)'})()}

1 Ответ

1 голос
/ 06 марта 2020

Здесь у вас неверный код, вы переназначаете весь объект стиля в строку. 

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

Используйте let для l oop -scoping вместо того, чтобы обернуть внутреннюю часть в замыкание. 

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);
...