本文通过JavaScript网页设计案例，详细解析了如何构建动态交互页面。内容涵盖使用HTML、CSS和JavaScript实现待办事项列表（Todo List），包括添加、完成标记及删除功能。此外，还介绍了图片画廊的点击放大效果、简易天气应用的API调用以及动态表格的数据增删改操作，为前端开发者提供实用的代码参考与设计思路。
1. JavaScript网页设计案例
接下来，我们将通过一个具体的JavaScript网页设计案例，演示如何构建一个动态的待办事项列表（Todo List）。该功能允许用户在网页上添加新的任务，将其标记为已完成状态，以及执行删除操作。整个实现将结合HTML构建页面骨架，CSS进行样式美化，并利用JavaScript注入动态交互逻辑。
1.1 HTML (index.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" rel="external nofollow" >
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todoInput" placeholder="Add new todo...">
<button onclick="addTodo()">Add Todo</button>
<ul id="todoList">
<!-- Todo items will be added here -->
</ul>
<script src="script.js"></script>
</body>
</html>1.2 CSS (style.css)
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
#todoList {
list-style-type: none;
padding: 0;
}
#todoList li {
margin: 10px 0;
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: space-between;
}
#todoList li.completed {
text-decoration: line-through;
opacity: 0.5;
}
#todoInput {
padding: 10px;
margin-right: 10px;
width: calc(100% - 120px);
}
button {
padding: 10px 20px;
cursor: pointer;
}1.3 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;
// Checkbox for marking todo as completed
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.onclick = function() {
itemElement.classList.toggle('completed', this.checked);
};
// Button for deleting todo
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function() {
list.removeChild(itemElement);
};
// Append elements to the list item
itemElement.appendChild(checkbox);
itemElement.appendChild(document.createTextNode('\u00A0')); // Add space
itemElement.appendChild(deleteButton);
// Append list item to the list
list.appendChild(itemElement);
// Clear input field
input.value = '';
}
}
// Optionally, add event listener to input field for Enter key press
document.getElementById('todoInput').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTodo();
}
});1.4说明
（1）HTML部分负责定义页面的基础结构，包含一个用于输入任务内容的文本框、一个触发添加操作的按钮，以及一个无序列表容器，用于后续动态展示已添加的待办事项。
（2）CSS部分专注于页面视觉美化，定义了待办事项列表的布局样式，同时优化了输入框和按钮的外观，确保用户界面简洁美观。
（3）JavaScript部分负责实现核心动态功能：
- 监听“添加待办事项”按钮的点击事件，并调用
addTodo函数以执行添加逻辑。 addTodo函数负责从输入框中读取文本内容，创建一个新的列表项元素，并为其附加复选框和删除按钮。- 复选框用于标识任务状态，点击时切换列表项的视觉样式以表示已完成。
- 删除按钮用于从列表中移除对应的待办事项。
- 监听输入框的
keypress事件，确保用户在按下 Enter 键时也能触发添加操作。
本案例展示了如何协同使用HTML、CSS和JavaScript，构建一个具备基础动态交互功能的网页应用。
2. JavaScript网页设计案例不同的功能和设计思路展示
除了上述待办事项列表外，JavaScript网页设计中还包含多种展示不同功能与设计思路的案例。以下列举几个常见类型及其简要说明：
2.1 图片画廊（Image Gallery）
（1）功能描述：
- 展示一组图片，并支持点击放大查看。
- 使用HTML和CSS创建图片网格布局。
- 使用JavaScript处理图片点击事件，显示放大的图片。
（2）代码示例（简化版）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery img {
width: 100px; /* 或其他尺寸 */
height: auto;
margin: 10px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
/* 其他模态框样式 */
}
.modal-content {
/* 放大图片的样式 */
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<!-- 更多图片 -->
</div>
<div id="modal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modalImg">
</div>
<script>
// JavaScript 代码，用于处理点击事件和显示模态框
// ...（省略详细实现）
</script>
</body>
</html>2.2 简易天气应用（Weather App）
（1）功能描述：
- 获取并显示天气信息。
- 使用天气API（如OpenWeatherMap）获取实时天气数据。
- 使用JavaScript动态更新页面内容。
（2）代码示例（简化版，需要替换API密钥）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
</head>
<body>
<h1>Weather App</h1>
<input type="text" id="cityInput" placeholder="Enter city">
<button id="getWeather">Get Weather</button>
<div id="weatherResult"></div>
<script>
const apiKey = 'YOUR_API_KEY'; // 替换为你的API密钥
document.getElementById('getWeather').onclick = function() {
const city = document.getElementById('cityInput').value;
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then(response => response.json())
.then(data => {
const temp = data.main.temp;
const weatherDescription = data.weather[0].description;
document.getElementById('weatherResult').innerHTML = `Temperature: ${temp}°C<br>Description: ${weatherDescription}`;
})
.catch(error => {
document.getElementById('weatherResult').innerHTML = 'City not found.';
});
};
</script>
</body>
</html>2.3 动态表格（Dynamic Table）
（1）功能描述：
- 展示一个表格，表格内容可以动态添加、删除或修改。
- 使用HTML创建表格结构。
- 使用JavaScript处理数据的增删改操作，并动态更新表格内容。
（2）代码示例（由于篇幅限制，仅提供概念性描述）：
- 创建一个HTML表格，包含表头和若干行。
- 使用JavaScript添加按钮或输入框，以便用户输入新数据。
- 编写JavaScript函数来处理添加、删除和修改数据的逻辑。
- 使用DOM操作动态更新表格内容。
这些案例涵盖了网页设计的不同方面，从基本的图片展示到实用的天气查询，再到动态的数据处理。它们都是学习JavaScript网页开发的良好起点，并可以根据实际需求进行扩展和定制。
到此这篇关于Java Script网页设计案例的文章就介绍到这了,更多相关Java Script网页设计案例内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！