简单版
以下是一个简单的 JavaScript 网页设计案例，实现一个显示当前时间的时钟页面：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Clock</title><style>body {text-align: center;font-family: Arial, sans-serif;background-color: #f0f0f0;}h1 {color: #333;}</style>
</head><body><h1>JavaScript Clock</h1><div id="clock"></div><script>function displayTime() {const now = new Date();const hours = now.getHours();const minutes = now.getMinutes();const seconds = now.getSeconds();const timeString = `${hours}:${minutes}:${seconds}`;document.getElementById('clock').textContent = timeString;}setInterval(displayTime, 1000);displayTime();</script>
</body></html>在这个案例中，页面包含一个标题和一个用于显示时间的<div>元素。使用 JavaScript，定义了一个displayTime函数来获取当前时间并将其格式化为字符串，然后更新<div>的文本内容以显示时间。通过setInterval函数每秒钟调用一次displayTime函数，实现时钟的动态更新。
页面的样式使用 CSS 进行设置，将页面内容居中显示，并设置了字体和背景颜色。
复杂版
以下是一个相对复杂一些的 JavaScript 网页设计案例，一个简单的待办事项应用：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>To-Do List App</title><style>body {font-family: Arial, sans-serif;background-color: #f5f5f5;}h1 {color: #333;text-align: center;}.container {max-width: 400px;margin: 0 auto;padding: 20px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}input[type="text"] {width: 100%;padding: 10px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 3px;}button {padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 3px;cursor: pointer;}ul {list-style: none;padding: 0;}li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;}.delete-btn {background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 3px;cursor: pointer;}</style>
</head><body><h1>To-Do List App</h1><div class="container"><input type="text" id="taskInput" placeholder="Enter a task"><button onclick="addTask()">Add Task</button><ul id="taskList"></ul></div><script>function addTask() {const taskInput = document.getElementById('taskInput');const taskText = taskInput.value.trim();if (taskText!== '') {const taskList = document.getElementById('taskList');const li = document.createElement('li');li.textContent = taskText;const deleteBtn = document.createElement('button');deleteBtn.textContent = 'Delete';deleteBtn.classList.add('delete-btn');deleteBtn.onclick = function () {taskList.removeChild(li);};li.appendChild(deleteBtn);taskList.appendChild(li);taskInput.value = '';}}</script>
</body></html>在这个案例中：
页面结构：
- 标题显示 “To-Do List App”。
- 一个包含输入框和添加按钮的容器，用于输入任务。
- 一个无序列表用于显示任务列表，每个任务项包含任务文本和删除按钮。
功能实现：
- 当在输入框中输入任务并点击 “Add Task” 按钮时，会将任务添加到任务列表中。
- 每个任务项都有一个 “Delete” 按钮，点击可以删除对应的任务。
页面使用了 CSS 进行样式设置，使其具有一定的美观性和可读性。通过 JavaScript 实现了添加任务和删除任务的功能。你可以根据实际需求进一步扩展这个应用，比如添加任务的编辑功能、标记任务为已完成等。
