当前位置：首页 > article >正文

探索JavaScript：网页设计中的创意与实践

article 2025/1/26 12:41:05

基础入门案例：简单交互页面

（一）案例描述

（二）技术实现

进阶应用案例：待办事项列表

（一）功能需求

（二）实现步骤

复杂应用案例：图片画廊

（一）功能概述

（二）技术解析

综合案例：简易天气应用

（一）应用介绍

（二）开发过程

基础入门案例：简单交互页面

（一）案例描述

以一个简单的网页为例，当用户访问页面时，首先映入眼帘的是一个普通的按钮，上面写着 “点击我显示欢迎消息”。在按钮下方，有一块空白区域，这里将是欢迎消息展示的地方。当用户点击按钮时，神奇的事情发生了，空白区域会瞬间显示出 “欢迎来到我们的网站！” 的欢迎消息。这看似简单的交互，却蕴含着 HTML、CSS 和 JavaScript 三种技术的协同合作，接下来我们深入了解它的实现过程。

（二）技术实现

HTML 结构搭建：HTML 是网页的基础架构，如同房屋的框架。在这个案例中，我们创建一个名为index.html的文件，搭建基本结构。使用<!DOCTYPE html>声明文档类型，让浏览器正确解析页面。<html>标签是整个页面的容器，包裹着所有内容。<head>标签内主要存放页面的元信息，如<meta charset="UTF-8">设置字符编码为 UTF-8，确保页面能正确显示各种字符；<title>标签中的 “简单 JavaScript 示例” 则是页面在浏览器标签上显示的标题。

真正构建页面可见元素的是<body>标签内的内容。<h1>标签定义了一个一级标题 “简单 JavaScript 示例”，让用户对页面主题一目了然。<button>标签创建了一个按钮，id属性设置为 “welcomeButton”，这个id就像是按钮的 “身份证”，方便在后续的 JavaScript 代码中精准找到它，按钮上显示的文字是 “点击我显示欢迎消息” 。<div>标签定义了一个用于显示欢迎消息的区域，id为 “welcomeMessage”，初始时这个区域是空白的，等待 JavaScript 来填充内容。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单JavaScript示例</title>
</head>
<body>
    <h1>简单JavaScript示例</h1>
    <button id="welcomeButton">点击我显示欢迎消息</button>
    <div id="welcomeMessage"></div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式设计：CSS 如同房屋的装修，能让网页变得美观。虽然在这个简单案例中，我们只进行了简单的样式设计，但也能让页面看起来更加舒适。例如，我们可以设置页面的整体字体为 Arial, sans-serif，让文字显示更加清晰；将按钮的背景颜色设置为 #4CAF50（一种清新的绿色），文字颜色设置为白色，使其在页面上更加醒目；当鼠标悬停在按钮上时，通过:hover 伪类将背景颜色变为 #45a049，给用户一个交互反馈，提示按钮可点击。还可以为标题和消息显示区域设置一些合适的边距和内边距，让页面元素分布更加合理。以下是简单的 CSS 示例代码：

body {
    font-family: Arial, sans-serif;
}
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;
}
#welcomeMessage {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

JavaScript 交互逻辑：JavaScript 是实现交互功能的关键，它赋予了网页 “灵魂”。在一个名为script.js的文件中（通过<script src="script.js"></script>链接到 HTML 文件），我们开始编写交互逻辑。首先，使用document.getElementById('welcomeButton')获取到 HTML 中的按钮元素，然后使用addEventListener方法为按钮添加一个点击事件监听器。当按钮被点击时，会触发这个监听器中的回调函数。在回调函数中，通过document.getElementById('welcomeMessage')获取到显示欢迎消息的div元素，然后使用innerHTML属性将其内容设置为<p>欢迎来到我们的网站！</p>，这样就在页面上显示出了欢迎消息。示例代码如下：

document.getElementById('welcomeButton').addEventListener('click', function() {
    document.getElementById('welcomeMessage').innerHTML = '<p>欢迎来到我们的网站！</p>';
});

进阶应用案例：待办事项列表

（一）功能需求

待办事项列表旨在帮助用户高效管理日常事务，核心功能围绕任务的添加、状态管理和删除展开。用户在输入框中输入任务内容，点击 “添加任务” 按钮或按下回车键，即可将任务添加到待办列表中。任务添加后，会按照添加顺序依次显示在列表区域，方便用户查看。

当用户完成某项任务时，点击任务前的勾选框，任务状态会切换为 “已完成”，同时任务文本会显示删除线效果，从视觉上突出任务已完成，帮助用户快速区分任务状态。若用户想要删除某个不再需要的任务，点击任务旁边的 “删除” 按钮，该任务会立即从列表中移除，让列表始终保持简洁，只展示有价值的待办信息。

（二）实现步骤

HTML 布局：首先创建一个 HTML 文件，搭建待办事项列表的基本结构。使用<div>元素包裹整个页面内容，起到容器作用，并设置class为 “container”，方便后续通过 CSS 进行样式控制。<h1>标签用于定义页面标题 “待办事项列表”，让用户一眼明确页面主题。

输入框使用<input>元素，设置type为 “text”，id为 “taskInput”，placeholder属性为 “添加新任务”，提示用户在此输入任务内容。添加任务的按钮使用<button>元素，id为 “addTaskBtn”，按钮上显示 “添加任务” 文字。

任务列表使用无序列表<ul>元素，id为 “taskList”，后续通过 JavaScript 动态向其中添加任务列表项。每个任务列表项将包含任务内容和操作按钮。具体代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>待办事项列表</h1>
        <input type="text" id="taskInput" placeholder="添加新任务">
        <button id="addTaskBtn">添加任务</button>
        <ul id="taskList">
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 美化：接下来，在 CSS 文件中为页面添加样式，使其更加美观。首先设置body的字体为 Arial, sans-serif，让文本显示清晰易读；背景颜色为 #f4f4f4，营造舒适的视觉背景。

“container” 类设置最大宽度为 600px，使其在页面中水平居中显示；内边距为 20px，增加内容与容器边缘的间距；背景颜色为白色，与整体背景形成对比；边框半径为 5px，使容器边角更加圆润；添加阴影效果box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)，增强立体感。

输入框#taskInput设置宽度为 70%，与按钮搭配协调；内边距为 10px，使输入内容与边框有一定间隔；外边距右侧为 10px，与按钮保持适当距离。按钮#addTaskBtn设置内边距为 10px 15px，使按钮大小适中；背景颜色为 #007BFF，一种醒目的蓝色；文字颜色为白色，增强对比度；鼠标悬停时，通过:hover 伪类改变背景颜色为 #0056b3，给出交互反馈。

任务列表#taskList去除默认的列表样式list-style-type: none；内边距为 0，使列表项紧贴容器；每个列表项设置一定的内边距和下边框，增强视觉区分度。具体 CSS 代码如下：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#taskInput {
    width: 70%;
    padding: 10px;
    margin-right: 10px;
}
#addTaskBtn {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
#addTaskBtn:hover {
    background-color: #0056b3;
}
#taskList {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}
#taskList li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

JavaScript 动态功能实现：在 JavaScript 文件中实现待办事项列表的动态交互功能。首先获取 HTML 页面中的输入框、添加按钮和任务列表元素，分别赋值给taskInput、addTaskBtn和taskList变量。

添加任务功能通过为添加按钮添加点击事件监听器实现。当按钮被点击时，获取输入框的值并去除首尾空格。若输入内容不为空，创建一个新的列表项<li>元素，为其添加任务内容和 “删除” 按钮。任务内容使用<span>元素包裹，方便设置样式。“删除” 按钮添加点击事件监听器，点击时删除对应的列表项。

标记任务完成功能通过为每个任务列表项添加点击事件监听器实现。当列表项被点击时，切换其completed类，利用 CSS 中completed类的样式（如text-decoration: line-through）来显示删除线效果，表示任务已完成。具体 JavaScript 代码如下：

// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// 添加任务
addTaskBtn.addEventListener('click', function () {
    const taskText = taskInput.value.trim();
    if (taskText) {
        const listItem = document.createElement('li');
        const taskSpan = document.createElement('span');
        taskSpan.textContent = taskText;
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.addEventListener('click', function () {
            taskList.removeChild(listItem);
        });
        listItem.appendChild(taskSpan);
        listItem.appendChild(deleteButton);
        taskList.appendChild(listItem);
        taskInput.value = '';
    }
});

// 标记任务完成
taskList.addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
        event.target.classList.toggle('completed');
    }
});

复杂应用案例：图片画廊

（一）功能概述

在网页中，图片画廊是一种常见且实用的展示形式，它能够以整齐、有序的方式展示一系列图片，为用户提供丰富的视觉内容。以一个旅游主题的图片画廊为例，当用户打开网页，映入眼帘的是一个精心布局的图片网格，里面展示着世界各地的著名景点图片，如雄伟的长城、神秘的金字塔、浪漫的埃菲尔铁塔等。这些图片以适中的尺寸和间距排列，让用户能够快速浏览到不同的风景。

当用户对某张图片感兴趣并点击时，图片会立即放大显示，占据整个屏幕的大部分区域，同时图片周围会出现半透明的遮罩层，将其他内容虚化，突出显示的图片。在放大的图片上，还会有一个清晰的关闭按钮，方便用户在查看完后轻松关闭放大视图，返回图片画廊界面。

（二）技术解析

HTML 与 CSS 布局：在 HTML 文件中，首先创建一个用于包裹整个画廊的div元素，设置其class为 “gallery”，作为图片画廊的容器。在这个容器内，使用多个img标签来展示图片，每个img标签的src属性指向对应的图片路径，alt属性则用于描述图片内容，提高网页的可访问性。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>图片画廊</title>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="长城">
        <img src="image2.jpg" alt="金字塔">
        <img src="image3.jpg" alt="埃菲尔铁塔">
    </div>
    <div id="modal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImg">
    </div>
    <script src="script.js"></script>
</body>
</html>

在 CSS 文件中，对画廊和图片进行样式设计。首先，设置body的margin为 0，padding为 0，去除默认的边距。“gallery” 类设置为display: grid，开启网格布局；grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))表示自动根据容器大小和图片最小宽度（200px）来分配列数，使图片能够自适应排列；grid-gap: 20px设置图片之间的间距为 20px 。

对于图片，设置width: 100%; height: auto，让图片宽度充满所在网格，高度自适应，保持图片的原始比例。“modal” 类用于设置放大图片的模态框样式，display: none使其默认隐藏；position: fixed设置为固定定位，覆盖整个屏幕；z-index: 1将其层级设置为最高，确保显示在最上层；padding-top: 100px使内容距离顶部有一定间距；background-color: rgba(0, 0, 0, 0.8)设置半透明的黑色背景，营造出聚焦图片的效果。“modal-content” 类设置放大图片的样式，max-width: 80%; max-height: 80%限制图片的最大宽度和高度，使其在屏幕内合理显示；margin: auto使其在模态框内居中显示。“close” 类设置关闭按钮的样式，position: absolute设置为绝对定位，top: 10px; right: 10px将其放置在模态框的右上角；font-size: 30px; color: white; cursor: pointer设置字体大小、颜色和鼠标指针样式，使其更加醒目和易于操作。具体 CSS 代码如下：

body {
    margin: 0;
    padding: 0;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    padding: 20px;
}
.gallery img {
    width: 100%;
    height: auto;
    cursor: pointer;
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
    max-width: 80%;
    max-height: 80%;
    margin: auto;
    display: block;
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

JavaScript 交互逻辑：在 JavaScript 文件中，首先获取所有图片元素、模态框元素、模态框中的图片元素以及关闭按钮元素，分别赋值给images、modal、modalImg和close变量。

然后使用forEach方法遍历images数组，为每个图片元素添加点击事件监听器。当图片被点击时，将模态框的display属性设置为 “block”，使其显示出来；同时将模态框中图片的src属性设置为被点击图片的src，实现图片的放大显示。

为关闭按钮添加点击事件监听器，当点击关闭按钮时，将模态框的display属性设置为 “none”，隐藏模态框，返回图片画廊界面。具体 JavaScript 代码如下：

const images = document.querySelectorAll('.gallery img');
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImg');
const close = document.querySelector('.close');
images.forEach(function(image) {
    image.addEventListener('click', function() {
        modal.style.display = 'block';
        modalImg.src = this.src;
    });
});
close.addEventListener('click', function() {
    modal.style.display = 'none';
});

综合案例：简易天气应用

（一）应用介绍

在日常生活中，天气情况对我们的出行、活动安排等有着重要影响。一款简易的天气应用能够实时获取并展示天气信息，为用户提供便利。这款应用的界面简洁明了，用户在打开应用后，首先看到的是一个搜索框，在搜索框中输入想要查询天气的城市名称，然后点击搜索按钮，即可快速获取该城市的实时天气数据。

获取到的数据会直观地展示在页面上，包括城市名称，让用户明确天气信息所属城市；实时温度，精确到小数点后一位，单位为摄氏度；天气状况描述，如 “晴”“多云”“小雨” 等，让用户对天气有清晰的了解；还有湿度数据，以百分比的形式呈现，反映空气中水汽的含量。通过这些信息，用户能快速了解目标城市的天气情况，从而合理安排自己的行程和活动。

（二）开发过程

获取 API 密钥：要实现天气数据的获取，我们需要借助专业的天气数据提供商的 API，这里以 OpenWeatherMap 为例。首先，打开 OpenWeatherMap 的官方网站（https://openweathermap.org/），在网站上找到注册入口，填写有效的邮箱、设置密码等必要信息完成注册。注册成功后，登录账号，进入个人中心，在相关设置或 API 管理页面中，找到获取 API 密钥的选项，点击生成密钥。生成的 API 密钥是一串唯一的字符组合，它就像是我们访问天气数据的 “通行证”，务必妥善保管，不要泄露给他人，以免造成安全问题。

HTML 与 CSS 界面设计：在 HTML 文件中，搭建页面的基本结构。使用<div>元素创建一个容器，设置class为 “weather-app”，作为整个应用的外层包裹。在容器内，首先使用<h1>标签定义页面标题 “简易天气应用”，让用户明确页面主题。接着，创建一个<input>元素作为输入城市名称的文本框，设置id为 “cityInput”，placeholder属性为 “输入城市名称”，提示用户在此输入。再创建一个<button>元素作为查询按钮，id为 “searchButton”，按钮上显示 “查询天气” 文字。最后，创建一个<div>元素用于显示天气结果，id为 “weatherResult”。具体代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易天气应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="weather-app">
        <h1>简易天气应用</h1>
        <input type="text" id="cityInput" placeholder="输入城市名称">
        <button id="searchButton">查询天气</button>
        <div id="weatherResult"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

在 CSS 文件中，对页面进行样式美化。首先设置body的字体为 Arial, sans-serif，使文本显示清晰易读；背景颜色为 #f4f4f4，营造舒适的视觉背景。“weather-app” 类设置最大宽度为 600px，使其在页面中水平居中显示；内边距为 20px，增加内容与容器边缘的间距；背景颜色为白色，与整体背景形成对比；边框半径为 5px，使容器边角更加圆润；添加阴影效果box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)，增强立体感。

输入框#cityInput设置宽度为 70%，与按钮搭配协调；内边距为 10px，使输入内容与边框有一定间隔；外边距右侧为 10px，与按钮保持适当距离。按钮#searchButton设置内边距为 10px 15px，使按钮大小适中；背景颜色为 #007BFF，一种醒目的蓝色；文字颜色为白色，增强对比度；鼠标悬停时，通过:hover 伪类改变背景颜色为 #0056b3，给出交互反馈。

天气结果显示区域#weatherResult设置内边距为 20px，上外边距为 20px；背景颜色为 #f9f9f9，与容器背景区分；边框半径为 3px，使其更加美观。具体 CSS 代码如下：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}
.weather-app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#cityInput {
    width: 70%;
    padding: 10px;
    margin-right: 10px;
}
#searchButton {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
#searchButton:hover {
    background-color: #0056b3;
}
#weatherResult {
    padding: 20px;
    margin-top: 20px;
    background-color: #f9f9f9;
    border-radius: 3px;
}

JavaScript 数据获取与更新：在 JavaScript 文件中，实现关键的数据获取和页面更新功能。首先，获取 HTML 页面中的输入框、查询按钮和天气结果显示区域的元素，分别赋值给cityInput、searchButton和weatherResult变量。

为查询按钮添加点击事件监听器，当按钮被点击时，获取输入框中的城市名称，并去除首尾空格。若城市名称不为空，构建 OpenWeatherMap 的 API 请求 URL，将城市名称和之前获取的 API 密钥作为参数添加到 URL 中。使用fetch函数发送 HTTP GET 请求，获取天气数据。fetch函数返回一个 Promise 对象，通过.then()方法处理响应，首先使用response.json()将响应数据解析为 JSON 格式。解析成功后，从 JSON 数据中提取城市名称、温度、天气状况和湿度等信息。然后，根据提取的数据，构建 HTML 字符串，更新天气结果显示区域的innerHTML，将天气信息展示在页面上。如果在请求过程中发生错误，通过.catch()方法捕获错误，并在天气结果显示区域显示错误信息，提示用户获取天气数据失败。具体 JavaScript 代码如下：

// 获取DOM元素
const cityInput = document.getElementById('cityInput');
const searchButton = document.getElementById('searchButton');
const weatherResult = document.getElementById('weatherResult');

// 为查询按钮添加点击事件监听器
searchButton.addEventListener('click', function () {
    const city = cityInput.value.trim();
    if (city) {
        const apiKey = 'YOUR_API_KEY'; // 替换为实际的API密钥
        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

        // 发送HTTP请求获取天气数据
        fetch(apiUrl)
          .then(response => response.json())
          .then(data => {
                // 提取天气信息
                const cityName = data.name;
                const temperature = data.main.temp;
                const weatherCondition = data.weather[0].description;
                const humidity = data.main.humidity;

                // 构建HTML字符串更新页面
                const weatherHTML = `
                    <h2>${cityName}的天气</h2>
                    <p>温度: ${temperature} °C</p>
                    <p>天气状况: ${weatherCondition}</p>
                    <p>湿度: ${humidity}%</p>
                `;
                weatherResult.innerHTML = weatherHTML;
            })
          .catch(error => {
                // 处理错误
                weatherResult.innerHTML = '<p>获取天气数据失败，请检查城市名称或网络连接。</p>';
                console.error('Error fetching weather data:', error);
            });
    } else {
        weatherResult.innerHTML = '<p>请输入城市名称。</p>';
    }
});

查看全文

http://www.kler.cn/a/519130.html