JavaScript网页设计案例

JavaScript 在网页设计中扮演着至关重要的角色，它能够实现动态效果、用户交互、数据验证等多种功能。下面，我将提供一个简单的 JavaScript 网页设计案例，该案例将创建一个基本的待办事项列表（Todo List），用户可以添加、删除和标记待办事项为已完成。

HTML 结构

首先，我们需要创建一个 HTML 页面来作为用户界面。

html 复制代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Todo List</title>  
<link rel="stylesheet" href="style.css">  
</head>  
<body>  
<h1>待办事项列表</h1>  
<input type="text" id="todoInput" placeholder="添加新的待办事项...">  
<button onclick="addTodo()">添加</button>  
<ul id="todoList">  
    <!-- 待办事项将在这里动态添加 -->  
</ul>  
  
<script src="script.js"></script>  
</body>  
</html>

CSS 样式

接着，我们添加一些基本的 CSS 来美化界面。

css 复制代码

/* style.css */  
body {  
    font-family: Arial, sans-serif;  
    margin: 40px;  
    line-height: 1.6;  
}  
  
#todoList {  
    list-style-type: none;  
    padding: 0;  
}  
  
#todoList li {  
    margin-bottom: 10px;  
    padding: 10px;  
    background-color: #f4f4f4;  
    border: 1px solid #ddd;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
}  
  
#todoList li.completed {  
    text-decoration: line-through;  
    background-color: #d4edda;  
}  
  
.delete-btn {  
    cursor: pointer;  
    color: red;  
}

JavaScript 功能

最后，我们使用 JavaScript 来添加动态功能

javascript 复制代码

// script.js  
function addTodo() {  
    const input = document.getElementById('todoInput');  
    const list = document.getElementById('todoList');  
    const itemText = input.value.trim();  
  
    if (itemText) {  
        const itemElement = document.createElement('li');  
        itemElement.textContent = itemText;  
  
        const deleteBtn = document.createElement('button');  
        deleteBtn.textContent = '删除';  
        deleteBtn.className = 'delete-btn';  
        deleteBtn.onclick = function() {  
            this.parentElement.remove();  
        };  
  
        const toggleBtn = document.createElement('button');  
        toggleBtn.textContent = '完成';  
        toggleBtn.onclick = function() {  
            const item = this.parentElement;  
            item.classList.toggle('completed');  
            this.textContent = item.classList.contains('completed') ? '未完成' : '完成';  
        };  
  
        itemElement.appendChild(toggleBtn);  
        itemElement.appendChild(document.createTextNode(' ')); // 添加一些间隔  
        itemElement.appendChild(deleteBtn);  
  
        list.appendChild(itemElement);  
  
        input.value = ''; // 清空输入框  
    }  
}

总结

这个简单的待办事项列表案例展示了 JavaScript 如何与 HTML 和 CSS 协作来创建动态、交互式的网页。用户可以在输入框中输入待办事项，点击"添加"按钮将其添加到列表中，点击"删除"按钮可以删除某个待办事项，点击"完成"按钮可以标记待办事项为已完成。你可以在这个基础上进一步扩展功能，比如添加待办事项的持久化存储、日期提醒等。