实战项目1：计数器

项目介绍

在这个项目中，我们将创建一个简单的计数器应用，该应用允许用户通过点击按钮来增加、减少和重置计数器的值。这个项目将帮助我们学习JavaScript DOM操作、事件处理和基本的状态管理。

项目需求

  1. 显示当前计数器的值
  2. 提供"增加"按钮，点击后计数器值加1
  3. 提供"减少"按钮，点击后计数器值减1
  4. 提供"重置"按钮，点击后计数器值重置为0
  5. 计数器值不能为负数
  6. 页面布局简洁美观

技术栈

  • HTML5
  • CSS3
  • JavaScript (ES6+)

项目结构

counter-project/
├── index.html      # 主页面
├── styles.css      # 样式文件
└── script.js       # JavaScript文件

实现步骤

1. 创建HTML结构

首先，我们需要创建HTML结构，包括计数器显示区域和控制按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="counter-container">
        <h1>计数器</h1>
        <div class="counter-display">
            <span id="counter-value">0</span>
        </div>
        <div class="counter-controls">
            <button id="decrease-btn">-</button>
            <button id="reset-btn">重置</button>
            <button id="increase-btn">+</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. 添加CSS样式

接下来，我们需要添加CSS样式，使计数器应用看起来更加美观。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.counter-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.counter-display {
    font-size: 80px;
    font-weight: bold;
    color: #4CAF50;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.counter-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

button:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#decrease-btn {
    background-color: #f44336;
}

#decrease-btn:hover {
    background-color: #da190b;
}

#reset-btn {
    background-color: #2196F3;
}

#reset-btn:hover {
    background-color: #0b7dda;
}

/* 动画效果 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.counter-display.changed {
    animation: pulse 0.3s ease;
}

3. 编写JavaScript逻辑

最后，我们需要编写JavaScript逻辑，实现计数器的功能。

// 获取DOM元素
const counterValue = document.getElementById('counter-value');
const increaseBtn = document.getElementById('increase-btn');
const decreaseBtn = document.getElementById('decrease-btn');
const resetBtn = document.getElementById('reset-btn');

// 初始化计数器值
let count = 0;

// 更新计数器显示
function updateCounter() {
    counterValue.textContent = count;
    
    // 添加动画效果
    counterValue.parentElement.classList.add('changed');
    setTimeout(() => {
        counterValue.parentElement.classList.remove('changed');
    }, 300);
    
    // 根据计数器值调整颜色
    if (count > 0) {
        counterValue.style.color = '#4CAF50';
    } else if (count < 0) {
        counterValue.style.color = '#f44336';
    } else {
        counterValue.style.color = '#4CAF50';
    }
}

// 增加计数器值
function increaseCount() {
    count++;
    updateCounter();
}

// 减少计数器值
function decreaseCount() {
    if (count > 0) {
        count--;
        updateCounter();
    }
}

// 重置计数器值
function resetCount() {
    count = 0;
    updateCounter();
}

// 添加事件监听器
increaseBtn.addEventListener('click', increaseCount);
decreaseBtn.addEventListener('click', decreaseCount);
resetBtn.addEventListener('click', resetCount);

// 初始更新
updateCounter();

功能说明

  1. 显示当前计数器值：使用&lt;span&gt;元素显示当前计数器的值。
  2. 增加功能：点击"+"按钮，计数器值加1。
  3. 减少功能：点击"-"按钮，计数器值减1，但不能为负数。
  4. 重置功能：点击"重置"按钮，计数器值重置为0。
  5. 视觉反馈：计数器值变化时，会有脉冲动画效果，并根据值的正负改变颜色。

扩展功能

我们可以进一步扩展计数器的功能，例如：

  1. 设置最大值和最小值限制
  2. 添加输入框，允许直接输入计数器值
  3. 保存计数器值到本地存储，刷新页面后保持不变
  4. 添加键盘支持，使用上下箭头键控制计数器
  5. 添加计数历史记录
  6. 添加主题切换功能

扩展功能示例：本地存储

// 获取DOM元素
const counterValue = document.getElementById('counter-value');
const increaseBtn = document.getElementById('increase-btn');
const decreaseBtn = document.getElementById('decrease-btn');
const resetBtn = document.getElementById('reset-btn');

// 从本地存储获取初始值，默认为0
let count = parseInt(localStorage.getItem('counter')) || 0;

// 更新计数器显示
function updateCounter() {
    counterValue.textContent = count;
    
    // 添加动画效果
    counterValue.parentElement.classList.add('changed');
    setTimeout(() => {
        counterValue.parentElement.classList.remove('changed');
    }, 300);
    
    // 根据计数器值调整颜色
    if (count > 0) {
        counterValue.style.color = '#4CAF50';
    } else if (count < 0) {
        counterValue.style.color = '#f44336';
    } else {
        counterValue.style.color = '#4CAF50';
    }
    
    // 保存到本地存储
    localStorage.setItem('counter', count);
}

// 增加计数器值
function increaseCount() {
    count++;
    updateCounter();
}

// 减少计数器值
function decreaseCount() {
    if (count > 0) {
        count--;
        updateCounter();
    }
}

// 重置计数器值
function resetCount() {
    count = 0;
    updateCounter();
}

// 添加事件监听器
increaseBtn.addEventListener('click', increaseCount);
decreaseBtn.addEventListener('click', decreaseCount);
resetBtn.addEventListener('click', resetCount);

// 初始更新
updateCounter();

扩展功能示例：键盘支持

// 添加键盘事件监听器
document.addEventListener('keydown', function(event) {
    switch(event.key) {
        case 'ArrowUp':
            event.preventDefault();
            increaseCount();
            break;
        case 'ArrowDown':
            event.preventDefault();
            decreaseCount();
            break;
        case 'Escape':
            event.preventDefault();
            resetCount();
            break;
    }
});

项目运行

  1. 创建上述三个文件（index.html, styles.css, script.js）
  2. 在浏览器中打开index.html文件
  3. 点击按钮或使用键盘上下箭头键来控制计数器

项目总结

通过这个简单的计数器项目，我们学习了：

  1. 如何使用JavaScript获取DOM元素
  2. 如何添加事件监听器
  3. 如何更新DOM内容
  4. 如何使用CSS动画增强用户体验
  5. 如何使用本地存储保存数据
  6. 如何处理键盘事件

这个项目虽然简单，但它涵盖了JavaScript开发中的许多基本概念，为我们后续开发更复杂的应用打下了基础。

练习

  1. 修改计数器，允许计数器值为负数
  2. 添加一个输入框，允许用户直接输入计数器值
  3. 添加一个"双倍"按钮，点击后计数器值加倍
  4. 添加一个"减半"按钮，点击后计数器值减半（向下取整）
  5. 添加计数历史记录，显示最近的10次计数变化
  6. 实现深色/浅色主题切换功能
  7. 添加一个进度条，显示当前计数器值相对于最大值的百分比（假设最大值为100）

扩展阅读

通过这个实战项目，我们已经掌握了JavaScript基本的DOM操作和事件处理，接下来我们将继续学习更复杂的JavaScript项目。

« 上一篇 JavaScript安全 下一篇 » 实战项目2：待办事项列表
↑