Question

我有一些JavaScript代码，它正在工作（有点）。我想以某种方式压缩它，也许同时抓住两个CSS选择器并使用某种forEach()循环遍历它们。

现在，两个星的top值都得到相同的值，例如style="top: 60%"。我希望他们为top，left，right和transform获取不同的随机值。

我意识到querySelectorAll将返回一个NodeList，并且可以转换为数组，但我无法弄清楚如何执行此操作并使.shooting-star-right使用{{Math.random获取不同的值1}}部分。

我试过这个：

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();
});

这是我的工作（虽然非常凌乱）code =＆gt;任何帮助非常感谢：）

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();
    }

Answer 1

嗯，这是较小的代码：

 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 + ')';

Answer 2

必须在el或forEach for循环中使用元素of。例如（未测试）：

＆＃13;

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

＆＃13;

Answer 3

如果你们有兴趣，我最终会同时收集你的意见并找到解决方案。我认为这看起来很不错。

我真的很感激帮助

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

将我的JavaScript压缩成较小的代码

3 个答案: