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

【问题标题】：Condense my JavaScript into lesser code将我的 JavaScript 压缩成更小的代码
【发布时间】：2018-06-01 05:17:59
【问题描述】：

我有一些 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();
    }

【问题讨论】：

您可能也喜欢这个网站来解决类似的问题：codereview.stackexchange.com

标签： javascript css-selectors nodelist

【解决方案1】：

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

【讨论】：

【解决方案2】：

嗯，这是较少的代码：

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

【讨论】：

【解决方案3】：

如果你们有兴趣，我最终会带走你们的两个 cmets 并找到解决方案。我觉得这看起来很不错。

非常感谢您的帮助

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

【讨论】：