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

我有一些JavaScript代码，它正在工作（有点）。我想以某种方式压缩它，可能一次获取两个CSS选择器，并使用某种

forEach（）

循环对它们进行迭代

现在，两颗星的

top

值得到了相同的值，例如

style=“top:60%”

。我想让他们为

顶部

、

左侧

、

右侧

和

变换

获取不同的随机值

我意识到

querySelectorAll

将返回一个节点列表，并可以转换为数组，但我不知道如何执行此操作，因此

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

我也试过：

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

这是我的工作代码（尽管相当混乱）=>非常感谢您的帮助：）

---

这是一个较小的代码：

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

---

元素

el

必须在

forEach

或

for

循环中使用。例如（未测试）：


函数集合样式（名称、样式）{
for（让el of document.getElementsByClassName（name））el.style=style；
//或者document.getElementsByClassName（name）.forEach（el=>el.style=style）；
}
常数r=n=>Math.random（）*n | 0+1；
设置样式（'shooting-star'，'top:${r（80）}%，left:${r（20）}%，transform:rotate（${r（180）}度）`）；
setStyles（'shooting-star-right'，'top:${r（80）}%，right:${r（20）}，transform:rotate（${r（220）}deg）`）如果你们感兴趣，我最终接受了你们的评论并找到了解决方案。我觉得这个看起来不错

我真的很感谢你的帮助

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

您可能也会喜欢此网站上的问题，如：