JavaScript 计数器 · 在线演示

这段代码在干嘛？

一句话：它做了一个最简单的网页计数器，页面上显示 0，你每点一次 +1 按钮，数字就加一。

打个比方：它像一个门口客流计数器

商场门口有人拿着一个小计数器。

每进来一个人，他就按一下按钮。

屏幕上的数字从 0 变成 1、2、3……

这段代码也是一样：

• HTML 负责摆东西：一个数字、一个按钮。
• CSS 负责打扮：居中、背景色、按钮样式。
• JS 负责干活：按钮被点一次，数字加一次。

---

先看 HTML：页面上有什么

html📋 复制
<div class="box">
  <h1 id="n">0</h1>
  <button id="add">+1</button>
</div>

这部分是在说：页面里放一个盒子。

盒子里有两个东西。

第一个：

html📋 复制
<h1 id="n">0</h1>

它是一个大标题，默认显示 0。

这里的 id="n" 很重要。

你可以把 id 理解成“名字牌”。

这个数字区域的名字叫 n，后面的 JavaScript 就能通过这个名字找到它。

第二个：

html📋 复制
<button id="add">+1</button>

这是一个按钮，按钮上写着 +1。

它也有一个名字牌：

html📋 复制
id="add"

意思是：这个按钮叫 add。

后面的 JS 会找到这个按钮，然后给它安排一个点击事件。

---

再看 CSS：让它好看一点

css📋 复制
body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  color: #fff;
  font-family: sans-serif;
}

这段是在装修整个页面。

css📋 复制
margin: 0;

去掉浏览器默认的外边距。

不然页面四周会有一点空白。

css📋 复制
height: 100vh;

让页面高度等于整个屏幕高度。

100vh 可以理解成“占满一整屏”。

css📋 复制
display: grid;
place-items: center;

这两句一起用，就是把里面的内容放到页面正中间。

像把一个牌子挂在墙的正中央。

css📋 复制
background: #0f172a;
color: #fff;

背景变成深蓝色，文字变成白色。

css📋 复制
font-family: sans-serif;

字体用一种比较干净的无衬线字体。

简单说，就是让字看起来更现代一点。

---

css📋 复制
.box {
  text-align: center;
}

这个 .box 对应 HTML 里的：

html📋 复制
<div class="box">

意思是：盒子里面的内容居中对齐。

数字和按钮就会看起来在一条中线上。

---

css📋 复制
button {
  padding: 10px 28px;
  border: 0;
  border-radius: 10px;
  background: #34d399;
  color: #064e3b;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

这段是在打扮按钮。

css📋 复制
padding: 10px 28px;

给按钮里面留点空间。

不然按钮会紧紧贴着文字，看起来很小气。

css📋 复制
border: 0;

去掉默认边框。

css📋 复制
border-radius: 10px;

让按钮有圆角。

css📋 复制
background: #34d399;
color: #064e3b;

按钮背景是绿色，文字是深绿色。

css📋 复制
font-size: 16px;
font-weight: 700;

文字大小是 16px，并且加粗。

css📋 复制
cursor: pointer;

鼠标放到按钮上时，变成小手。

这是在告诉用户：这个东西可以点。

---

最后看 JS：真正让数字动起来

js📋 复制
let n = 0;

这行是在准备一个变量 n，初始值是 0。

你可以把它想成计数器里面的小本子。

一开始本子上记着：

js📋 复制
0

每点一次按钮，就把这个数字加一。

---

js📋 复制
document.getElementById('add')

这句是在页面里找东西。

意思是：

“帮我找到 id 叫 add 的元素。”

也就是这个按钮：

html📋 复制
<button id="add">+1</button>

document 可以理解成整个网页。

getElementById 就是“通过名字牌找元素”。

---

js📋 复制
document.getElementById('add').onclick = () => {
  document.getElementById('n').textContent = ++n;
};

这段是核心。

拆开看。

js📋 复制
.onclick = () => {
  ...
}

意思是：

“当这个按钮被点击时，就执行大括号里面的代码。”

也就是用户点一下按钮，里面的逻辑就跑一次。

---

里面这句：

js📋 复制
document.getElementById('n')

是在找到页面上显示数字的地方。

也就是：

html📋 复制
<h1 id="n">0</h1>

找到它之后，改它的内容：

js📋 复制
.textContent = ++n;

textContent 就是“这个标签里面显示的文字”。

原来显示：

html📋 复制
0

点击后要变成：

html📋 复制
1

再点一次变成：

html📋 复制
2

---

++n 是什么意思？

js📋 复制
++n

意思是：先让 n 加一，再拿加完之后的值去用。

比如一开始：

js📋 复制
let n = 0;

第一次点击：

js📋 复制
++n

n 先变成 1，然后页面显示 1。

第二次点击，n 先变成 2，页面显示 2。

所以整个流程是：

txt📋 复制
页面一开始显示 0
      ↓
点击 +1
      ↓
n 从 0 变成 1
      ↓
把 h1 里的文字改成 1
      ↓
页面显示 1

再点一次：

txt📋 复制
点击 +1
      ↓
n 从 1 变成 2
      ↓
把 h1 里的文字改成 2
      ↓
页面显示 2

---

把 JS 写松一点，会更好懂

原代码很短：

js📋 复制
let n = 0;
document.getElementById('add').onclick = () => {
  document.getElementById('n').textContent = ++n;
};

如果写成适合新手看的版本，可以这样：

js📋 复制
// 准备一个数字，初始是 0
let n = 0;

// 找到按钮
const addButton = document.getElementById('add');

// 找到显示数字的 h1
const numberTitle = document.getElementById('n');

// 当按钮被点击时
addButton.onclick = () => {
  // 数字加 1
  n = n + 1;

  // 把新的数字显示到页面上
  numberTitle.textContent = n;
};

这两段代码效果一样。

只是原代码更短，新手版更清楚。

---

一句话收尾

这个计数器的核心就是：按钮负责触发，变量 n 负责记数，textContent 负责把最新数字显示到页面上。