[初学者必看]JavaScript 简单实际案例练习，锻炼代码逻辑思维

在这里插入图片描述

文章目录

- 创意小项目合集：从简易图片轮播到购物车
- - - 1. 图片轮播器
    - 2. 动态列表
    - 3. 模态框（Modal）
    - 4. 简单的表单验证
    - 5. 简易待办事项列表（Todo List）
    - 6. 简易图片画廊
    - 7. 简易时钟
    - 8. 简易搜索框高亮
    - 9. 简易颜色选择器
    - 10. 简易音乐播放器
    - 11. 简易动画效果
    - 12. 简易计算器
    - 13. 简易倒计时器
    - 14. 简易购物车
    - 结束语
- 参考答案：
- - - 1. 图片轮播器
    - 2. 动态列表
    - 3. 模态框（Modal）
    - 4. 简单的表单验证
    - 5. 简易待办事项列表（Todo List）
    - 6. 简易图片画廊
    - 7. 简易时钟
    - 8. 简易搜索框高亮
    - 9. 简易颜色选择器
    - 10. 简易音乐播放器
    - 11. 简易动画效果
    - 12. 简易计算器
    - 13. 简易倒计时器
    - 14. 简易购物车

创意小项目合集：从简易图片轮播到购物车

在网络开发中，小型项目是学习和实践前端技术的理想选择。这些项目不仅能够提升你的编码技能，还能为你提供宝贵的实战经验。以下是一系列简易小项目的介绍，涵盖了各种常见的Web开发场景，从简单的图片轮播到购物车，让我们一起来看看吧。

1. 图片轮播器

创建一个简单的图片轮播器，让用户能够通过点击按钮或自动播放来浏览多张图片。

提示： 使用HTML、CSS和JavaScript来实现基本的轮播功能。可以使用setInterval()函数来实现自动播放功能，并使用按钮的点击事件来切换图片。

2. 动态列表

建立一个购物列表，用户可以在页面中添加商品并删除商品。

提示： 使用HTML表单元素和JavaScript来实现用户输入商品名称并添加到列表中的功能，同时监听删除按钮的点击事件以移除商品。

3. 模态框（Modal）

创建一个模态框，用户可以通过点击按钮来打开它，并在模态框中显示一些文本或HTML内容。

提示： 使用HTML、CSS和JavaScript来实现模态框的显示和隐藏功能。监听按钮的点击事件来控制模态框的显示，并使用适当的CSS样式来美化模态框。

4. 简单的表单验证

制作一个登录表单，验证用户名和密码是否符合特定条件。

提示： 使用HTML表单和JavaScript来实现表单提交事件的监听，以及对用户名和密码的验证。在不满足条件时，显示相应的错误消息。

5. 简易待办事项列表（Todo List）

创建一个待办事项列表，用户可以添加、标记完成或删除待办事项。

提示： 使用HTML、CSS和JavaScript来实现待办事项的添加、删除和标记完成功能。可以使用数组来存储待办事项的数据，并根据用户的操作来更新列表。

6. 简易图片画廊

建立一个图片画廊，用户可以点击缩略图查看大图，并支持左右滑动切换图片。

提示： 使用HTML、CSS和JavaScript来创建画廊的布局和功能。监听缩略图的点击事件，将点击的图片显示在模态框中，并实现左右滑动切换功能。

7. 简易时钟

展示一个实时更新的时钟，显示当前时间。

提示： 使用JavaScript的Date对象来获取当前时间，并通过setInterval()函数每秒更新一次显示的时间。

8. 简易搜索框高亮

在网页上实现一个搜索框功能，能够高亮显示与用户输入匹配的文本。

提示： 使用JavaScript监听搜索框的输入事件，获取用户输入的文本，并使用正则表达式或字符串方法来在页面上查找并高亮匹配的文本。

9. 简易颜色选择器

创建一个颜色选择器，用户可以从多种颜色中选择，并将其应用到页面上的一个元素上。

提示： 使用HTML、CSS和JavaScript来实现颜色选择器的界面和功能。监听颜色选择事件，并将选择的颜色应用到指定的页面元素上。

10. 简易音乐播放器

制作一个简单的音乐播放器，允许用户选择并播放音乐文件。

提示： 使用HTML的<audio>元素来实现音乐的播放功能，并使用JavaScript监听播放器的控制按钮的点击事件，以实现播放、暂停、停止、上一曲、下一曲等功能。

11. 简易动画效果

展示一些简单的动画效果，如元素的淡入淡出、旋转、缩放等。

提示： 使用HTML、CSS和JavaScript来实现各种动画效果。可以使用CSS的transition、transform和animation属性来创建动画效果，并使用JavaScript监听按钮的点击事件，以控制动画的播放和停止。

12. 简易计算器

创建一个简单的计算器应用，支持基本的加、减、乘、除运算。

提示： 使用HTML、CSS和JavaScript来实现计算器的用户界面和功能。监听按钮的点击事件，并根据用户点击的按钮来更新计算器的显示内容，并实现基本的运算逻辑。

13. 简易倒计时器

制作一个简单的倒计时器，用户可以设置倒计时的总时间，并在倒计时结束时触发一个事件。

提示： 使用HTML、CSS和JavaScript来实现倒计时器的界面和功能。监听开始按钮的点击事件，并使用JavaScript的定时器来实现倒计时功能，并在倒计时结束时触发指定的事件。

14. 简易购物车

建立一个简单的购物车应用，用户可以添加商品到购物车，并查看购物车中的商品和总价。

提示： 使用HTML、CSS和JavaScript来实现购物车的用户界面和功能。监听添加到购物车按钮的点击事件，并将商品信息保存到购物车中，并实现购物车详情页面的展示，包括商品列表和总价等信息。

结束语

以上这些项目都是入门级别的小型项目，适合初学者练习和掌握前端开发的基础知识和技能。希望你能够通过这些项目不断提升自己的编码能力，加油！

参考答案：

好的，下面给出每个项目的简要参考答案：

由于这些题目涉及到具体的编程实现，以下给出一些示例性的伪代码或简短代码片段来指导实现这些功能，而不是完整的解决方案。

1. 图片轮播器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Slider</title>
  <style>
    .slider {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 200px;
    }
    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }
    .slide {
      flex: 0 0 auto;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
      <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
      <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
    </div>
  </div>
  <button onclick="prevSlide()">Previous</button>
  <button onclick="nextSlide()">Next</button>

  <script>
    let currentIndex = 0;
    const slides = document.querySelectorAll('.slide');

    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.style.transform = `translateX(${100 * (i - index)}%)`;
      });
    }

    function prevSlide() {
      currentIndex = (currentIndex - 1 + slides.length) % slides.length;
      showSlide(currentIndex);
    }

    function nextSlide() {
      currentIndex = (currentIndex + 1) % slides.length;
      showSlide(currentIndex);
    }
  </script>
</body>
</html>

2. 动态列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping List</title>
</head>
<body>
  <input type="text" id="itemInput" placeholder="Enter item">
  <button onclick="addItem()">Add</button>

  <ul id="itemList"></ul>

  <script>
    function addItem() {
      const itemInput = document.getElementById('itemInput');
      const itemName = itemInput.value.trim();
      if (itemName !== '') {
        const itemList = document.getElementById('itemList');
        const listItem = document.createElement('li');
        listItem.textContent = itemName;
        itemList.appendChild(listItem);
        itemInput.value = '';
      }
    }
  </script>
</body>
</html>

3. 模态框（Modal）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 5px;
    }
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button onclick="openModal()">Open Modal</button>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal()">&times;</span>
      <p>Modal content here</p>
    </div>
  </div>

  <script>
    const modal = document.getElementById('myModal');

    function openModal() {
      modal.style.display = 'block';
    }

    function closeModal() {
      modal.style.display = 'none';
    }

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = 'none';
      }
    }
  </script>
</body>
</html>

4. 简单的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation</title>
</head>
<body>
  <form id="loginForm" onsubmit="return validateForm()">
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
  <div id="error"></div>

  <script>
    function validateForm() {
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();

      if (username === '' || password === '') {
        document.getElementById('error').textContent = 'Username and password are required';
        return false;
      }

      return true;
    }
  </script>
</body>
</html>

5. 简易待办事项列表（Todo List）

HTML:

<input type="text" id="todoInput">  
<button onclick="addTodo()">添加</button>  
<ul id="todoList"></ul>
JavaScript:
javascript
复制代码
let todos = [];  
  
function addTodo() {  
    let input = document.getElementById('todoInput').value;  
    if (input) {  
        todos.push(input);  
        displayTodos();  
        document.getElementById('todoInput').value = '';  
    }  
}  
  
function displayTodos() {  
    // 清除之前的列表项  
    let list = document.getElementById('todoList');  
    list.innerHTML = '';  
    // 添加新的列表项  
    todos.forEach(todo => {  
        let li = document.createElement('li');  
        li.textContent = todo;  
        list.appendChild(li);  
    });  
}

6. 简易图片画廊

HTML (仅缩略图部分):

<div class="thumbnails">  
    <img class="thumbnail" src="img1-thumbnail.jpg" data-large="img1-large.jpg">  
    <!-- 更多缩略图... -->  
</div>  
<div id="modal" class="hidden">  
    <!-- 大图展示区域 -->  
</div>
JavaScript (点击缩略图并展示大图):
javascript

document.querySelectorAll('.thumbnail').forEach(thumbnail => {  
    thumbnail.addEventListener('click', function() {  
        let largeImgSrc = this.dataset.large;  
        let modal = document.getElementById('modal');  
        // 清除并设置新的大图  
        modal.innerHTML = `<img src="${largeImgSrc}" alt="Large Image">`;  
        // 显示模态框...  
    });  
});

7. 简易时钟

HTML:

<div id="clock"></div>

JavaScript:
function updateClock() {  
    let now = new Date();  
    let hours = String(now.getHours()).padStart(2, '0');  
    let minutes = String(now.getMinutes()).padStart(2, '0');  
    let seconds = String(now.getSeconds()).padStart(2, '0');  
    document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;  
}  
  
setInterval(updateClock, 1000);

8. 简易搜索框高亮


<input type="text" id="searchInput">  
<div id="content">  
    <!-- 文本内容 -->  
</div>
JavaScript (高亮逻辑需更详细实现):

document.getElementById('searchInput').addEventListener('input', function() {  
    let searchTerm = this.value;  
    let content = document.getElementById('content');  
    // 使用正则表达式和DOM操作来高亮内容...  
});

9. 简易颜色选择器

HTML:


<input type="color" id="colorPicker" onchange="changeColor()">  
<div id="targetElement" style="width: 100px; height: 100px;"></div>

JavaScript:


function changeColor() {  
    let color = document.getElementById('colorPicker').value;  
    let targetElement = document.getElementById('targetElement');  
    targetElement.style.backgroundColor = color;  
}

10. 简易音乐播放器

HTML:


<audio id="audioPlayer" src="song.mp3" preload="auto"></audio>  
<button onclick="playPause()">播放/暂停</button>

JavaScript:


let audioPlayer = document.getElementById('audioPlayer');  
  
function playPause() {  
    if (audioPlayer.paused) {  
        audioPlayer.play();  
    } else {  
        audioPlayer.pause();  
    }  
}  
  
// 还可以添加其他控制，如停止、静音、调整音量等

11. 简易动画效果

HTML:


<div id="animatedElement">Hello, Animation!</div>

CSS:


#animatedElement {  
    transition: all 2s ease-in-out;  
}  
  
#animatedElement.fadeInOut {  
    opacity: 0;  
}

JavaScript:


let animatedElement = document.getElementById('animatedElement');  
  
function toggleFade() {  
    animatedElement.classList.toggle('fadeInOut');  
}  
  
// 假设有一个按钮触发这个函数

12. 简易计算器

HTML (仅展示部分按钮):


<input type="text" id="calculatorDisplay">  
<button onclick="calculate('+')">+</button>  
<button onclick="calculate('-')">-</button>  
<!-- ... 其他按钮和数字按钮 ... -->

JavaScript:


let display = document.getElementById('calculatorDisplay');  
let currentNumber = '';  
let operator = null;  
  
function calculate(op) {  
    if (isNaN(display.valueAsNumber)) {  
        // 处理运算符逻辑  
        if (operator) {  
            // 执行之前的运算并更新display  
            // ...  
            operator = op;  
            currentNumber = '';  
        } else {  
            operator = op;  
        }  
    } else {  
        // 处理数字输入逻辑  
        // ...  
    }  
    // 完整的计算器逻辑会更复杂  
}  
  
// 还需要添加其他函数来处理数字和运算符的输入以及等于按钮的点击事件

13. 简易倒计时器

HTML:


<input type="number" id="countdownInput" value="60">  
<button onclick="startCountdown()">开始倒计时</button>  
<div id="countdownDisplay">00:00</div>

JavaScript:


let countdownDisplay = document.getElementById('countdownDisplay');  
let countdownInput = document.getElementById('countdownInput');  
let countdownInterval;  
  
function startCountdown() {  
    let totalSeconds = parseInt(countdownInput.value, 10);  
    let countdown = totalSeconds;  
      
    countdownInterval = setInterval(function() {  
        let minutes = Math.floor(countdown / 60);  
        let seconds = countdown % 60;  
        countdownDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;  
          
        countdown--;  
          
        if (countdown < 0) {  
            clearInterval(countdownInterval);  
            alert('倒计时结束!');  
        }  
    }, 1000);  
}

14. 简易购物车

这个示例会更加复杂，但以下是基本结构：
HTML:


<button onclick="addToCart('product1')">添加到购物车</button>  
<!-- ... 更多商品按钮 ... -->  
<div id="cart">  
    <!-- 购物车内容将在这里显示 -->  
</div>

JavaScript (伪代码):


let cart = [];  
  
function addToCart(productId) {  
    // 假设有一个获取商品信息的函数getProduct(productId)  
    let product = getProduct(productId);  
    cart.push(product);  
    displayCart();  
}  
  
function displayCart() {  
    //