如何使我的功能缩短JavaScript

Question

我写的功能 1.在div中创建P元素 2.在特定div中的随机P元素中生成随机数

但是......我的JavaScript代码有700行：D 我只举一个小例子。

HTML：

<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>

CSS：

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.example {
  display: inline-block;
  position: absolute;
  color: orange;
  width: 100%;
  font-size: 30px;

}

.example:nth-child(2) {  

  top: 20%;
}
.example:nth-child(3) {  

  top: 40%;
}
.example:nth-child(4) {  

  top: 60%;
}
.example:nth-child(5) {  

  top: 80%;


}

.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;


}

的JavaScript

setInterval(updateOneNumber, 1000);
setInterval(updateOneNumber01, 1000);
setInterval(updateOneNumber02, 1000);
setInterval(updateOneNumber03, 1000);
setInterval(updateOneNumber04, 1000);
var example = document.getElementsByClassName("example");
var elements = example[0].getElementsByClassName("num");
var makeBoxInterval = setInterval(makeBoxes, 5);
var makeBoxInterval01 = setInterval(makeBoxes01, 5);
var makeBoxInterval02 = setInterval(makeBoxes02, 5);
var makeBoxInterval03 = setInterval(makeBoxes03, 5);

var makeBoxInterval04 = setInterval(makeBoxes04, 5);


function updateOneNumber() {
    var elements = example[0].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber01() {
    var elements = example[1].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber02() {
    var elements = example[2].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber03() {
    var elements = example[3].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber04() {
    var elements = example[4].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}



// generates paragraph with class num
function makeBoxes() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[0].getElementsByClassName("num");
  var rowWidth = parent[0].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval);
  } else {
    parent[0].appendChild(para);
  }
}
function makeBoxes01() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[1].getElementsByClassName("num");
  var rowWidth = parent[1].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval01);
  } else {
    parent[1].appendChild(para);
  }
}

function makeBoxes02() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[2].getElementsByClassName("num");
  var rowWidth = parent[2].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval02);
  } else {
    parent[2].appendChild(para);
  }
}

function makeBoxes03() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[3].getElementsByClassName("num");
  var rowWidth = parent[3].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval03);
  } else {
    parent[3].appendChild(para);
  }
}
function makeBoxes04() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[4].getElementsByClassName("num");
  var rowWidth = parent[4].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval04);
  } else {
    parent[4].appendChild(para);
  }
}

如您所见，有很多代码。我有23个带id的div例如：D

实施例： Fiddle

到目前为止，我尝试声明但没有效果

示例：fiddle

Answer 1

使用函数参数和一个for循环进行基本重构：

＆＃13;

＆＃13;

var example = document.getElementsByClassName("example");
var elements = example[0].getElementsByClassName("num");

for (let i = 0; i < 5; i++)
{
  const handle = setInterval(() => makeBoxes(i), 5);
  setInterval(() => updateOneNumber(i, handle), 1000);
}

function updateOneNumber(x) {
    var elements = example[x].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}

// generates paragraph with class num
function makeBoxes(i, handle) {
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[i].getElementsByClassName("num");
  var rowWidth = parent[i].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(handle);
  } else {
    parent[i].appendChild(para);
  }
}

＆＃13;

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.example {
  display: inline-block;
  position: absolute;
  color: orange;
  width: 100%;
  font-size: 30px;

}

.example:nth-child(2) {  

  top: 20%;
}
.example:nth-child(3) {  

  top: 40%;
}
.example:nth-child(4) {  

  top: 60%;
}
.example:nth-child(5) {  

  top: 80%;


}

.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;


}

＆＃13;

<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

让所有函数都使用参数 pos ，例如：

function updateOneNumber(pos) {
 var elements = example[pos].getElementsByClassName("num");
 var numElements = elements.length;
 var i = Math.floor(Math.random() * numElements);
 elements[i].innerHTML = Math.floor(Math.random() * 9);
}

然后只设置间隔：

setInterval(updateOneNumber, 1000, /*pos */ 0);