一個簡單的計數器應用是學習如何集成 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 操作與事件監聽。進一步，你可以嘗試添加更多功能，例如：
- 設置最大值或最小值；
- 將當前值存儲到本地存儲；
- 添加加減速率設置等。
——內核對象管理)
