正文

JavaScript实现每行输出十个数的for循环方法

/0 浏览量
0629

在 JavaScript 中，我们可以通过 for 循环来输出一系列数字。如果你想实现每行输出十个数的循环，可以通过在循环中添加一个额外的条件来检查行数，并在必要时重置行数。下面是一个简单的例子：

for (let i = 1; i <= 50; i++) { // 假设我们想要输出50个数字
  console.log(i);
  if (i % 10 === 0) { // 当 i 是 10 的倍数时，换行
    console.log(); // 输出空行
  }
}

这段代码的输出将如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

这里，我们使用了一个简单的条件 i % 10 === 0 来判断当前数字是否是10的倍数。如果是，就输出一个空行，这样就会开始新的行。这种方式可以有效地在控制台（或任何文本输出环境中）实现每行输出十个数的输出。

如果你想在一个表格或其他格式的环境中输出这些数字，你可能需要使用 HTML 和 CSS 来更好地控制格式。以下是一个使用 HTML 和 JavaScript 在网页上实现类似效果的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output Numbers</title>
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  td {
    padding: 5px;
    text-align: center;
  }
</style>
</head>
<body>

<table id="numberTable"></table>

<script>
function outputNumbers() {
  const table = document.getElementById('numberTable');
  let row = null;
  let cell = null;

  for (let i = 1; i <= 50; i++) {
    cell = table.insertRow(-1).insertCell(-1);
    cell.innerHTML = i;

    if (i % 10 === 0) {
      row = table.rows.length - 1;
      cell = table.insertRow(row + 1).insertCell(-1);
      cell.innerHTML = '<br>'; // 在新行的单元格中插入一个换行标签
    }
  }
}
outputNumbers();
</script>

</body>
</html>

这段代码会在网页中创建一个表格，并将数字填充到表格中。每当插入第十个数字时，它会在下一个单元格中添加一个换行标签 <br>，从而开始新的一行。

-- 展开阅读全文 --