const body = document.querySelector( `body` );
function getRandomNumber( max ) {
return Math.floor( Math.random() * max )
}
function getRandomRGB() {
const colors = [];
for( let i = 0; i < 3; i++ ) {
const n = getRandomNumber( 100 + 1 );
colors.push( n );
}
return `rgb(${ colors.join( '%,' )}%)`;
}
function changeRGB() {
const divs = body.querySelectorAll( `div` );
for( let i = 0; i < divs.length; i++ ) {
divs[ i ].style.backgroundColor = getRandomRGB();
divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}
}
for( let i = 0; i < 25; i++ ) {
const div = document.createElement( `div` );
div.style.backgroundColor = getRandomRGB();
div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
body.appendChild( div );
}
setInterval( changeRGB, 1000 );
* {
box-sizing: border-box; margin: 0; padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex; flex-wrap: wrap;
filter: saturate( 200% );
}
section {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
backdrop-filter: blur( 5rem );
-webkit-backdrop-filter: blur( 5rem );
}
div {
flex-grow: 1;
min-width: 25%; min-height: 10%; background-color: #222;
transition-property: background-color;
transition-duration: 2s;
}
<section></section>
函数changergb():
function changeRGB() {
const divs = body.querySelectorAll( `div` );
for( let i = 0; i < divs.length; i++ ) {
divs[ i ].style.backgroundColor = getRandomRGB();
divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}
}
以及后面的for循环:
for( let i = 0; i < 25; i++ ) {
const div = document.createElement( `div` );
div.style.backgroundColor = getRandomRGB();
div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
body.appendChild( div );
}
包含几乎相同的代码行:
divs[ i ].style.backgroundColor = getRandomRGB();
divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
和
div.style.backgroundColor = getRandomRGB();
div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
分别地
在里面 changeRGB()
我们在操纵 div
已经存在的,并且在 for
循环我们首先创建这些 div
然后,他用同样的方式操纵它们。我的目标是重构这段代码,以减少重复性。
我需要换一个 div
及 divs[ i ]
有一些动态的东西,所以我可以调用一个函数,在这里输入正确的值。我不确定循环是否会使事情变得更复杂,但我已经尝试过了 window[ variable ].style.backgroundColor
等等,在哪里 variable
是一个动态变量,但没有运气。可能是执行错误。
我该怎么做 changeRGB()
功能与 for
循环更少重复,更简洁?
3条答案
按热度按时间j5fpnvbx1#
您可以编写另一个函数,如下所示:
你可以这样称呼它:
这样,您只需将div元素作为提示传递,就可以动态地使用它。
0yg35tkg2#
最简单的解决方案可能是:
…这是:
如果不想等待一秒钟,请在创建时删除属性生成,并手动运行该函数一次。
nkoocmlb3#
有几种节省代码的方法可以实现这一点。首先,我发现使用es6 arrow函数可以更清晰地处理像这样的多个函数。要直接回答您的问题,请设置
backgroundColor
及transitionDuration
在这两个不同的功能中是相同的,并且可以外包,正如我在下面使用applyTransform()
.还有其他节省空间的方法,例如,您可以缩短如下内容:
为此:
现在,缩短代码并不总是最好的选择,因为它有时会使阅读和维护变得更加困难。然而,我发现这个结果比原始代码更容易阅读,同时它是16行,而原始代码是32行。