wordpress 站长主题即刻搜索
一个简单的计数器应用是学习如何集成 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();
});代码说明
- 选择并类型断言 DOM 元素，确保类型安全；
- 初始化
count值为 0； updateCounter()函数用于更新页面上的计数显示；- 为三个按钮分别绑定点击事件。
TypeScript 编译为 JavaScript
浏览器不能直接运行 TypeScript，因此需要将 .ts 文件编译为 .js 文件。使用如下命令之一：
npx tsc task.ts
# 或
tsc task.ts运行命令后，将生成 task.js 文件，并可在 HTML 中引用运行。
项目总结
这个简单的计数器项目非常适合初学者，通过它你可以熟悉 TypeScript 与 HTML、CSS 的结合，掌握基本的类型断言、DOM 操作与事件监听。进一步，你可以尝试添加更多功能，例如：
- 设置最大值或最小值；
- 将当前值存储到本地存储；
- 添加加减速率设置等。