Конденсировать мой JavaScript в меньший код - PullRequest
Новая
       10

Конденсировать мой JavaScript в меньший код

0 голосов
/ 31 мая 2018

У меня есть некоторый код JavaScript, и он работает (вроде).Я бы хотел как-то сжать его, возможно, одновременно захватить оба селектора CSS и перебрать их с циклом forEach().

Прямо сейчас, значение top для обеих звезд даетто же значение, например style="top: 60%".Я хотел бы, чтобы они получили различные случайные значения для top, left, right и transform.

Я понимаю, что querySelectorAll вернетNodeList, и может быть преобразован в массив, но я не могу понять, как это сделать, и поэтому он может получить .shooting-star-right различные значения, используя секцию Math.random.

Я пробовал это: 

var stars = document.querySelectorAll('.shooting-star, .shooting-star-right');

for (let el of stars) {
    shootingStar();
}

Я также пробовал это: 

var stars = document.querySelectorAll('.shooting-star, .shooting-star-right');

stars.forEach(function() {
    shootingStar();
});

Вот мой рабочий (хотя и довольно грязный) код => любая помощь очень ценится:) 

init: () => {
        let star = document.querySelector('.shooting-star');
        let starRight = document.querySelector('.shooting-star-right');

        const shootingStar = () => {
            setInterval(() => {

                let topPos = Math.floor(Math.random() * 80) + 1,
                    topPosRight = Math.floor(Math.random() * 80) + 1,
                    leftPos = Math.floor(Math.random() * 20) + 1,
                    rightPos = Math.floor(Math.random() * 20 + 1),
                    trans = Math.floor(Math.random() * 180) + 1,
                    transRight = Math.floor(Math.random() * 220) + 1;

                topPos = topPos + '%',
                topPosRight = topPosRight + '%',
                leftPos = leftPos + '%',
                rightPos = rightPos + '%',
                trans = trans + 'deg',
                transRight = transRight + 'deg';

                star.style.top = topPos,
                star.style.left = leftPos,
                star.style.transform = 'rotate(' + '-' + trans + ')';

                starRight.style.top = topPosRight,
                starRight.style.right = rightPos,
                starRight.style.transform = 'rotate(' + transRight + ')';

            }, 9000);
        };
        shootingStar();
    }

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Элемент el должен использоваться в цикле forEach или for of.Например (не проверено): 

function setStyles(name, style) { 
  for (let el of document.getElementsByClassName(name)) el.style = style; 
  // or document.getElementsByClassName(name).forEach(el => el.style = style); 
}
const r = n => Math.random() * n | 0 + 1;

setStyles('shooting-star', `top:${r(80)}%,left:${r(20)}%,transform:rotate(-${r(180)}deg)`);

setStyles('shooting-star-right', `top:${r(80)}%,right:${r(20)},transform:rotate(${r(220)}deg)`);
0 голосов
/ 01 июня 2018

Если вам, ребята, интересно, я в итоге взял ваши комментарии и нашел решение.Я думаю, это выглядит довольно хорошо.

Я очень ценю помощь 

const randomNum = (low, high) => {
  let r = Math.floor(Math.random() * (high - low + 1)) + low;
  return r;
};
const shootingStars = (name) => {
  const stars = document.querySelectorAll(name);
  const starsArray = [...stars];
  setInterval(() => {
    starsArray.forEach(el => {
      el.style.cssText = 'transform: rotate(' + randomNum(0, 180) + 'deg' + ') translateY(' + randomNum(0, 200) + 'px' + ')';
      });
    }, 9000);
  };
  shootingStars('.shooting-star');
  shootingStars('.shooting-star-right');
0 голосов
/ 31 мая 2018

Ну, это меньший код: 

 star.style.top = (Math.floor(Math.random() * 80) + 1) +"%";
 star.style.left = (Math.floor(Math.random() * 20) + 1) +"%;

и т. Д.

Кроме того, поскольку вы уже используете преобразование, вы также можете использовать его для позиционирования.Он работает намного лучше, чем установка left и top при использовании для анимации. 

let leftPos = Math.floor(Math.random() * 80) + 1
let topPos = Math.floor(Math.random() * 20) + 1
star.style.transform = 'translate('+ leftPos +'px, '+topPos +'px) rotate(' + '-' + trans + ')';
...