我有一些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();
}
发布于 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)`);
发布于 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 + ')';
发布于 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');
https://stackoverflow.com/questions/50613872
复制相似问题