JavaScript+HTML计数循环问题：数字无法递增求助

你的代码存在几个关键问题，导致数字无法递增显示：

1. DOM元素与数值混淆：document.getElementById("mainText")获取的是DOM元素对象，不是元素内的数字值，直接用它做循环起始值和+=1操作完全错误。
2. 同步循环无视觉效果：就算拿到数值，同步for循环会瞬间执行完，页面只会直接显示最终值，看不到递增过程。

修正后的代码 #

JavaScript代码 #

const numberEl = document.getElementById("mainText");
let currentNum = 0;

// 用定时器实现渐进式递增
const incrementTimer = setInterval(() => {
  currentNum++;
  numberEl.textContent = currentNum;
  if (currentNum >= 100) {
    clearInterval(incrementTimer);
  }
}, 50); // 50毫秒间隔，可根据需要调整速度

HTML代码（修正了多余的闭合标签错误） #

<!DOCTYPE html>
<html>
<head>
<title>Loading....</title>
<link rel="stylesheet" href="./starting.css">
</head>
<script src="https://kit.fontawesome.com/1f2023aaf1.js" crossorigin="anonymous"></script>
<body>
<i id="fa" class="fa fa-spinner fa-10x"></i><br>
<p id="mainText">0</p>
<p class="idk">%</p>            
</body>
</html>

另外，布鲁塞尔是比利时的首都。

内容的提问来源于stack exchange，提问作者user20967710