JavaScript在网页设计中扮演着至关重要的角色，它不仅能够增强网页的交互性，还能为用户提供更加丰富的体验。以下将详细介绍几个典型的JavaScript网页设计案例，每个案例都将从功能描述、实现思路、代码示例等方面进行阐述。
1. 图片画廊（Image Gallery）
功能描述：
图片画廊允许用户浏览一组图片，并支持点击放大查看图片细节。这种设计常见于产品展示、摄影作品集等场景。
实现思路：
- 使用HTML和CSS创建图片网格布局。
- 使用JavaScript监听图片的点击事件。
- 当图片被点击时，显示一个模态框（Modal），并在其中加载并显示被点击的图片。
- 提供一个关闭按钮，用于关闭模态框。
代码示例：
<!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>
/* CSS样式省略，用于创建图片网格和模态框样式 */
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- 更多图片 -->
</div>
<div id="modal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modalImg">
</div>
<script>
// JavaScript代码省略，用于监听图片点击事件并显示模态框
</script>
</body>
</html>
2. 待办事项列表（To-Do List）
功能描述：
待办事项列表允许用户添加、删除和标记待办事项。这种设计常见于任务管理、日程规划等场景。
实现思路：
- 使用HTML创建一个输入框和一个按钮，用于添加待办事项。
- 使用一个无序列表（
<ul>）来显示待办事项。 - 使用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</title>
<style>
/* CSS样式省略，用于美化待办事项列表 */
</style>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addTask">Add</button>
<ul id="taskList"></ul>
<script>
// JavaScript代码省略，用于管理待办事项的增删改查
</script>
</body>
</html>
3. 简易天气应用（Weather App）
功能描述：
简易天气应用允许用户输入城市名，并显示该城市的实时天气信息。这种设计常见于旅游规划、日常生活查询等场景。
实现思路：
- 使用HTML创建一个输入框和一个按钮，用于输入城市名和获取天气信息。
- 使用一个
<div>元素来显示天气信息。 - 使用JavaScript监听按钮的点击事件，通过API（如OpenWeatherMap）获取天气数据。
- 将获取到的天气数据显示在页面上。
代码示例：
<!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密钥
const getWeatherButton = document.getElementById('getWeather');
const weatherResult = document.getElementById('weatherResult');
getWeatherButton.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;
weatherResult.innerHTML = `Temperature: ${
temp}°C<br>Description: ${
weatherDescription}`;
})
.catch(error => {
weatherResult.innerHTML = 'City not found.';
});
};
</script>
</body>
</html>
4. 简易计算器（Simple Calculator）
功能描述：
简易计算器允许用户输入两个数字和一个运算符，然后显示运算结果。这种设计常见于教育、日常生活等场景。
实现思路：
- 使用HTML创建两个输入框（用于输入数字）、一个下拉菜单（用于选择运算符）和一个按钮（用于触发计算）。
- 使用一个
<span>元素来显示运算结果。 - 使用JavaScript监听按钮的点击事件，获取输入框中的数字和下拉菜单中的运算符，然后进行计算。
- 将计算结果显示在页面上。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
<script>
function calculate() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var operator = document.getElementById("operator").value;
var result = 0;
if (operator == "+") {
result = Number(num1) + Number(num2);
} else if (operator == "-") {
result = num1 - num2;
} else if (operator == "*") {
result = num1 * num2;
} else if (operator == "/") {
if (num2 != 0) {
result = num1 / num2;
} else {
alert("除数不能为0！");
return;
}
}
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<h1>简单计算器</h1>
<form>
<label for="num1">数字1:</label>
<input type="number" id="num1" name="num1"><br><br>
<label for="num2">数字2:</label>
<input type="number" id="num2" name="num2"><br><br>
<label for="operator">运算符:</label>
<select id="operator" name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<input type="button" value="计算" onclick="calculate()"><br><br>
<label for="result">结果:</label>
<span id="result"></span>
</form>
</body>
</html>
以上案例展示了JavaScript在网页设计中的应用，涵盖了图片展示、任务管理、数据获取和简单计算等多个方面。通过这些案例，你可以更好地理解JavaScript在前端开发中的重要作用，并学习如何将其应用于实际项目中。
原文链接: https://blog.csdn.net/hai40587/article/details/141753112