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

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

我们将构建的内容

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

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

项目预览图

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

计数器应用 -- HTML 和 CSS 布局

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

html 复制代码

<!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 逻辑，处理按钮点击事件并更新显示值：

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 文件。使用如下命令之一：

bash 复制代码

npx tsc task.ts
# 或
tsc task.ts

运行命令后，将生成 task.js 文件，并可在 HTML 中引用运行。

项目总结

这个简单的计数器项目非常适合初学者，通过它你可以熟悉 TypeScript 与 HTML、CSS 的结合，掌握基本的类型断言、DOM 操作与事件监听。进一步，你可以尝试添加更多功能，例如：

设置最大值或最小值；
将当前值存储到本地存储；
添加加减速率设置等。