当前位置：首页 > ops >正文

15.1 【基础项目】使用 HTML、CSS 和 TypeScript 构建的简单计数器应用

ops 2025/7/29 0:28:54

一个简单的计数器应用是学习如何集成 HTML、CSS 和 TypeScript 的绝佳项目。该应用允许用户对计数值进行增加、减少和重置，展示了 TypeScript 中基本的 DOM 操作和事件处理。

我们将构建的内容

我们将创建一个具有以下功能的计数器应用：

增加计数值
减少计数值（不能低于 0）
重置计数值为 0

项目预览图

一个典型的计数器界面：数字居中显示，下方是三种按钮：增加、减少、重置。

计数器应用 – HTML 和 CSS 布局

下面是完整的 HTML 和 CSS 代码，用于构建计数器的结构与样式：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>计数器应用</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {text-align: center;background: white;padding: 20px;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}h1 {margin-bottom: 20px;}.counter {font-size: 3rem;margin: 20px 0;}.buttons button {padding: 10px 20px;margin: 5px;font-size: 1rem;cursor: pointer;border: none;border-radius: 4px;transition: background 0.3s;}#increment {background: #4caf50;color: white;}#decrement {background: #f44336;color: white;}#reset {background: #2196f3;color: white;}.buttons button:hover {opacity: 0.8;}</style></head><body><div class="container"><h1>计数器应用</h1><div id="counter" class="counter">0</div><div class="buttons"><button id="increment">增加</button><button id="decrement">减少</button><button id="reset">重置</button></div></div><script src="task.js"></script> <!-- 编译后的 JS 文件 --></body>
</html>

TypeScript 逻辑代码

以下是计数器的 TypeScript 逻辑，处理按钮点击事件并更新显示值：

const counter = document.getElementById('counter') as HTMLDivElement;
const incrementBtn = document.getElementById('increment') as HTMLButtonElement;
const decrementBtn = document.getElementById('decrement') as HTMLButtonElement;
const resetBtn = document.getElementById('reset') as HTMLButtonElement;let count = 0;function updateCounter() {counter.textContent = count.toString();
}incrementBtn.addEventListener('click', () => {count++;updateCounter();
});decrementBtn.addEventListener('click', () => {if (count > 0) {count--;updateCounter();}
});resetBtn.addEventListener('click', () => {count = 0;updateCounter();
});