代码之家 › 专栏 › 技术社区 › fencepencil

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

nodelist css-selectors javascript

-1

fencepencil · 技术社区 · 8 年前

我有一些javascript代码,它正在工作。我想以某种方式压缩它,也许可以同时获取两个css选择器并用 forEach() 某种循环。

现在,那个 top 两颗星的值都是相同的。 style="top: 60%" . 我想让他们 不同的 的随机值 顶部 , 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 回复 | 直到 8 年前

Slai 8 年前

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

Kokodoko 8 年前

好吧,这是次要的代码:

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

fencepencil 8 年前

如果你们有兴趣的话,我会听取你们的意见并找到解决办法。我觉得这看起来不错。

我真的很感谢你的帮助

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