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

Question

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

目前，两颗星的 top 值相同，例如 style="top: 60%"。我想让他们为 top、left、right 和 transform.[=24 获得 不同的 个随机值=]

我意识到 querySelectorAll 将 return 一个 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();
    }

Answer 1

嗯，这是较少的代码：

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

等等

还有，既然你已经使用了transform，那不妨也用它来定位。当用于动画时，它比设置 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

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

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

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 压缩成更小的代码

Condense my JavaScript into lesser code

javascript

css-selectors

nodelist