JavaScript网页设计案例从零开始打造互动网页:动态时钟&交互式图片轮播器&待办事项列表&动态表单验证

本文链接：https://blog.youkuaiyun.com/C_V_Better/article/details/145509635

本文将通过多个实际案例，带你深入了解 JavaScript 在网页设计中的应用，从基础到高级，逐步提升你的网页设计技能。

一、案例一：动态时钟

1. 案例介绍

动态时钟是一个简单而实用的 JavaScript 应用，它可以在网页上实时显示当前时间，并且每秒更新一次。这个案例可以帮助你快速掌握 JavaScript 的基本语法和 DOM 操作。

2. 实现代码

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时钟</title>
</head>
<body>
    <div id="clock"></div>
    <script src="clock.js"></script>
</body>
</html>

JavaScript 部分 (`clock.js`)

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

setInterval(updateClock, 1000);
updateClock();

3. 运行效果

打开网页后，你会看到一个实时更新的时钟，格式为 HH:MM:SS。这个时钟每秒更新一次，显示当前的时间。

二、案例二：交互式图片轮播器

1. 案例介绍

交互式图片轮播器是一个常见的网页组件，它可以在网页上展示多张图片，并允许用户通过点击按钮或自动播放来切换图片。这个案例可以帮助你掌握 JavaScript 的事件处理和 DOM 操作。

2. 实现代码

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播器</title>
    <style>
        #carousel {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        #carousel img {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        #carousel img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <img src="image1.jpg" class="active" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script src="carousel.js"></script>
</body>
</html>

JavaScript 部分 (`carousel.js`)

const carousel = document.getElementById('carousel');
const images = carousel.getElementsByTagName('img');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');

let currentIndex = 0;

function showImage(index) {
    for (let i = 0; i < images.length; i++) {
        images[i].classList.remove('active');
    }
    images[index].classList.add('active');
}

function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
}

function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
}

prevButton.addEventListener('click', prevImage);
nextButton.addEventListener('click', nextImage);

setInterval(nextImage, 5000); // 自动播放

3. 运行效果

打开网页后，你会看到一个图片轮播器，初始显示第一张图片。点击“上一张”和“下一张”按钮可以切换图片，图片会在 5 秒后自动切换。

三、案例三：待办事项列表

1. 案例介绍

待办事项列表是一个实用的工具，用户可以添加、删除和标记待办事项。这个案例可以帮助你掌握 JavaScript 的数组操作和 DOM 操作。

2. 实现代码

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <style>
        #todoList {
            width: 300px;
        }
        #todoList li {
            list-style: none;
            margin: 5px 0;
            padding: 5px;
            background-color: #f0f0f0;
        }
        #todoList li.completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>待办事项列表</h1>
    <ul id="todoList"></ul>
    <input type="text" id="todoInput" placeholder="输入待办事项">
    <button id="addTodo">添加</button>
    <script src="todo.js"></script>
</body>
</html>

JavaScript 部分 (`todo.js`)

const todoList = document.getElementById('todoList');
const todoInput = document.getElementById('todoInput');
const addTodoButton = document.getElementById('addTodo');

let todos = [];

function renderTodos() {
    todoList.innerHTML = '';
    todos.forEach((todo, index) => {
        const li = document.createElement('li');
        li.textContent = todo.text;
        if (todo.completed) {
            li.classList.add('completed');
        }
        li.addEventListener('click', () => {
            todo.completed = !todo.completed;
            li.classList.toggle('completed');
        });
        todoList.appendChild(li);
    });
}

function addTodo() {
    const todoText = todoInput.value.trim();
    if (todoText) {
        todos.push({ text: todoText, completed: false });
        todoInput.value = '';
        renderTodos();
    }
}

addTodoButton.addEventListener('click', addTodo);

3. 运行效果

打开网页后，你会看到一个待办事项列表。用户可以在输入框中输入待办事项，点击“添加”按钮将其添加到列表中。点击列表项可以标记或取消标记待办事项。

四、案例四：动态表单验证

1. 案例介绍

动态表单验证是一个常见的功能，用户在填写表单时，系统会实时验证输入内容是否符合要求。这个案例可以帮助你掌握 JavaScript 的事件处理和表单操作。

2. 实现代码

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表单验证</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <h1>注册表单</h1>
    <form id="registrationForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <span id="usernameError" class="error"></span>
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
        <span id="emailError" class="error"></span>
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <span id="passwordError" class="error"></span>
        <br>
        <button type="submit">提交</button>
    </form>
    <script src="formValidation.js"></script>
</body>
</html>

JavaScript 部分 (`formValidation.js`)

const form = document.getElementById('registrationForm');
const usernameInput = document.getElementById('username');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');

function validateUsername() {
    const username = usernameInput.value.trim();
    if (username.length < 3) {
        usernameError.textContent = '用户名至少 3 个字符';
        return false;
    }
    usernameError.textContent = '';
    return true;
}

function validateEmail() {
    const email = emailInput.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        emailError.textContent = '邮箱格式不正确';
        return false;
    }
    emailError.textContent = '';
    return true;
}

function validatePassword() {
    const password = passwordInput.value.trim();
    if (password.length < 6) {
        passwordError.textContent = '密码至少 6 个字符';
        return false;
    }
    passwordError.textContent = '';
    return true;
}

function validateForm(event) {
    event.preventDefault();
    const isUsernameValid = validateUsername();
    const isEmailValid = validateEmail();
    const isPasswordValid = validatePassword();
    if (isUsernameValid && isEmailValid && isPasswordValid) {
        alert('表单提交成功！');
    }
}

form.addEventListener('submit', validateForm);

3. 运行效果

打开网页后，你会看到一个注册表单。用户在输入框中输入内容时，系统会实时验证输入是否符合要求。如果输入不符合要求，会在对应的输入框旁边显示错误信息。

五、总结

通过以上四个案例，我们从简单的动态时钟到复杂的动态表单验证，逐步掌握了 JavaScript 在网页设计中的应用。JavaScript 为网页带来了丰富的交互性和动态效果，让用户体验得到了极大的提升。希望这些案例能够帮助你在实际项目中更好地应用 JavaScript，提升你的网页设计技能。如果你有任何问题或建议，欢迎在评论区留言。