Javascript 如何缩短我的函数

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

但是。。。我的JavaScript代码有700行：D 我只举一个小例子来说明我所拥有的

HTML:

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

例如：

到目前为止，我试图发表声明，但没有效果

---

示例：

使用函数参数和一个

用于

循环的基本重构：

var-example=document.getElementsByClassName（“示例”）；
var elements=示例[0]。GetElementsByCassName（“num”）；
for（设i=0；i<5；i++）
{
consthandle=setInterval（（）=>makebox（i），5）；
setInterval（（）=>updateOneNumber（i，句柄），1000；
}
函数updateOneNumber（x）{
var elements=example[x].getElementsByClassName（“num”）；
var numElements=elements.length；
var i=Math.floor（Math.random（）*numElements）；
元素[i].innerHTML=Math.floor（Math.random（）*9）；
}
//使用类num生成段落
函数生成框（i，句柄）{
var para=document.createElement（“p”）；
第4.1段类列表添加（“num”）；
var parent=示例；
var elements=example[i].getElementsByClassName（“num”）；
var rowWidth=parent[i]。offsetWidth；
var boxesSoFar=elements.length；
var boxWidth=元素[0]。偏移网络宽度；
var boxesInRow=行宽/boxWidth；
如果（boxesSoFar>boxesInRow-1）{
间隙（手柄）；
}否则{
父母[本人]。子女（第1段）；
}
}

正文{
显示：内联块；
背景色：黑色；
框大小：边框框；
}
* {
填充：0；
保证金：0；
框大小：边框框；
}
.举例{
显示：内联块；
位置：绝对位置；
颜色：橙色；
宽度：100%；
字体大小：30px；
}
。例如：第n个子女（2）{
最高：20%；
}
。例如：第n个子女（3）{
最高：40%；
}
。例如：第n个子女（4）{
最高：60%；
}
.例如：第n个孩子（5）{
最高：80%；
}
纳姆先生{
显示：内联块；
颜色：橙色；
宽度：50px；
高度：50px；
文本对齐：居中；
}

只需让所有函数都接受一个参数pos，例如：

然后只需设置间隔：

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

---

您应该使用parameters.loops.wtf。这绝对不是为了好玩，我创建了一个可观察的笔记本，基本上做同样的事情。我不认为这是如何重构这个问题的答案，但它确实显示了如何使用承诺来生成数字，以及如何使用反应性来显示信息。如果你没有一个反应式的显示框架，那是没有帮助的，但是把它放在一起很有趣。没有任何解释吗？@ScottMarcus:添加了一行解释我所做的。没什么大不了的。由于问题本质上是“我如何重构它？”，我不确定OP是否理解使用函数参数的基本重构。好吧，如果需要的话，我会澄清。

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);
  }
}

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);