有没有办法重写这个基本函数,这样我就不会重复相同的行两次了?

w80xi6nr  于 2021-09-13  发布在  Java
关注(0)|答案(3)|浏览(390)
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 然后,他用同样的方式操纵它们。我的目标是重构这段代码,以减少重复性。
我需要换一个 divdivs[ i ] 有一些动态的东西,所以我可以调用一个函数,在这里输入正确的值。我不确定循环是否会使事情变得更复杂,但我已经尝试过了 window[ variable ].style.backgroundColor 等等,在哪里 variable 是一个动态变量,但没有运气。可能是执行错误。
我该怎么做 changeRGB() 功能与 for 循环更少重复,更简洁?

j5fpnvbx

j5fpnvbx1#

您可以编写另一个函数,如下所示:

function applyChange(element) {
    element.style.backgroundColor = getRandomRGB();
    element.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}

你可以这样称呼它:

function changeRGB() {
  const divs = body.querySelectorAll( `div` );

  for( let i = 0; i < divs.length; i++ ) {
    applyChanges(divs[i]); // <- Call it here
  }
}

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );

  applyChanges(div); // <- Call it here
  body.appendChild( div ); 
}

这样,您只需将div元素作为提示传递,就可以动态地使用它。

0yg35tkg

0yg35tkg2#

最简单的解决方案可能是:

//  div.style.backgroundColor = getRandomRGB();
//  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;

…这是:

changeRGB();
setInterval( changeRGB, 1000 );

如果不想等待一秒钟,请在创建时删除属性生成,并手动运行该函数一次。

nkoocmlb

nkoocmlb3#

有几种节省代码的方法可以实现这一点。首先,我发现使用es6 arrow函数可以更清晰地处理像这样的多个函数。要直接回答您的问题,请设置 backgroundColortransitionDuration 在这两个不同的功能中是相同的,并且可以外包,正如我在下面使用 applyTransform() .
还有其他节省空间的方法,例如,您可以缩短如下内容:

function getRandomRGB() {
  const colors = [];

  for( let i = 0; i < 3; i++ ) {
    const  n = getRandomNumber( 100 + 1 );   
    colors.push( n );
  }
  return `rgb(${ colors.join( '%,' )}%)`; 
}

为此:

const getRandomRGB = () => `rgb(${ [0,1,2].map(n => getRandomNumber( 100 + 1 )).join( '%,' )}%)`

现在,缩短代码并不总是最好的选择,因为它有时会使阅读和维护变得更加困难。然而,我发现这个结果比原始代码更容易阅读,同时它是16行,而原始代码是32行。

const body = document.querySelector( `body` );
const getRandomNumber = max => Math.floor( Math.random() * max )
const getRandomRGB = () => `rgb(${ [0,1,2].map(n => getRandomNumber( 100 + 1 )).join( '%,' )}%)`
const changeRGB = () => divs.forEach(applyTransform); 
const applyTransform = div => {
  div.style.backgroundColor = getRandomRGB();
  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}
for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  applyTransform(div)
  body.appendChild( div ); 
}
const divs = body.querySelectorAll( `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);
}

div {
  flex-grow: 1;
  min-width: 25%;
  min-height: 10%;
  background-color: #222;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
<section></section>

相关问题