将我的JavaScript压缩为较少的代码
将我的JavaScript压缩为较少的代码
提问于 2018-05-31 05:55:03
我有一些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();
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-31 10:41:16
必须在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)`);
Stack Overflow用户
发布于 2018-05-31 07:08:41
好吧，这是一个较小的代码：
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 + ')';Stack Overflow用户
发布于 2018-06-01 05:18:00
如果你们感兴趣，我最终采纳了你们的意见并找到了解决方案。我觉得这个看起来很不错。
我真的很感谢你的帮助
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');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50613872
复制相关文章
相似问题