JavaScript 网页设计案例

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量1.9k 收藏 24
点赞数 32
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vvvae1234/article/details/141745134
版权

在本指南中，我们将通过一个实际的网页设计案例，深入探讨如何使用 JavaScript 创建一个交互式的网页。我们将构建一个简单的待办事项应用（To-Do List），并将 JavaScript 应用于网页的动态行为与用户交互。

一、环境准备

1.1 工具与环境

在开始之前，我们需要准备一些基本工具：

  • 编辑器：一个代码文本编辑器，例如 Visual Studio Code 或 Sublime Text。
  • 浏览器：为了查看我们的网页，可以使用 Chrome、Firefox 或任何现代浏览器。
  • Git（可选）：用来管理版本控制，尤其是在开发过程中。

1.2 文件结构

在你的工作目录中，创建一个新文件夹，比如叫 todo-app，并在里面创建如下文件：

todo-app/
|-- index.html
|-- styles.css
|-- script.js

二、构建 HTML 结构

接下来，我们将构建一个基本的 HTML 结构，为我们的待办事项应用打下基础。

2.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">
<link rel="stylesheet" href="styles.css">
<title>待办事项应用</title>
</head>
<body>
<div class="container">
<h1>待办事项</h1>
<input type="text" id="task-input" placeholder="添加新的任务...">
<button id="add-task">添加</button>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
解释代码
  • DOCTYPE 和语言：指定文档为 HTML5。
  • 头部信息：包含字符集、响应式设计和引入 CSS 文件。
  • 主体结构：包含一个输入框、一个按钮和一个用于展示任务的列表。

三、添加样式

为了让我们的应用更美观，我们需要为其添加一些样式。

3.1 创建 CSS 文件

打开 styles.css 文件，并输入以下代码：

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 50px auto;
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

input[type="text"] {
width: calc(100% - 80px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #4cae4c;
}

ul {
list-style-type: none;
padding: 0;
}

li {
padding: 10px;
margin: 5px 0;
background-color: #eaeaea;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}

li button {
background-color: #d9534f;
}
解释样式
  • 全局样式：为正文设置字体、背景色和内边距。
  • 容器样式：通过设置最大宽度、外边距、内边距和阴影，为容器增添美感。
  • 按钮及输入框：设置按钮和输入框的样式，使其看起来更加现代。

四、编写 JavaScript 逻辑

接下来，我们为待办事项应用添加 JavaScript 逻辑，使其具备动态功能。

4.1 创建 JavaScript 文件

打开 script.js 文件，并输入以下代码：

document.addEventListener('DOMContentLoaded', () => {
const taskInput = document.getElementById('task-input');
const addTaskButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');

addTaskButton.addEventListener('click', addTask);
taskInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
addTask();
}
});

function addTask() {
const taskValue = taskInput.value.trim();
if (taskValue === '') {
alert('请输入有效的任务!');
return;
}

const li = document.createElement('li');
li.textContent = taskValue;

const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(deleteButton);

taskList.appendChild(li);
taskInput.value = '';
}
});
解释代码
  • 事件监听器：使用 DOMContentLoaded 确保页面加载完毕后再执行 JavaScript。
  • 添加任务功能：
    • 获取输入框内容并去除多余空白。
    • 如果输入为空，弹出提示。
    • 创建新的任务 li 元素，并添加删除按钮。
    • 将新任务添加到任务列表，并清空输入框。
  • 删除任务功能：点击删除按钮时，从列表中移除相应的任务。

五、测试应用

5.1 启动项目

  1. 打开你的Web浏览器。
  2. 用浏览器打开 index.html 文件（可以直接拖动至浏览器）。
  3. 你应该能够看到一个基本的待办事项应用界面。

5.2 添加和删除任务

  • 在输入框中输入一个任务，然后点击“添加”按钮，或者按下回车键。
  • 确保任务被添加到列表中。
  • 点击任务旁边的“删除”按钮，确保任务能从列表中移除。

六、增加功能

在这一步，我们可以为应用增加一些更高级的功能，让它更具实用性。例如，增加任务的持久化存储。

6.1 使用 Local Storage

我们可以使用浏览器的 Local Storage 功能来存储和恢复任务列表数据。

更新 script.js

修改 script.js 文件，让我们在页面加载时从 Local Storage 中读取任务，并在添加任务时将其存储：

document.addEventListener('DOMContentLoaded', () => {
const taskInput = document.getElementById('task-input');
const addTaskButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');

// 从 Local Storage 加载任务
loadTasks();

addTaskButton.addEventListener('click', addTask);
taskInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
addTask();
}
});

function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.forEach(task => {
addTaskToDOM(task);
});
}

function addTask() {
const taskValue = taskInput.value.trim();
if (taskValue === '') {
alert('请输入有效的任务!');
return;
}

addTaskToDOM(taskValue);
saveTaskToLocalStorage(taskValue);
taskInput.value = '';
}

function addTaskToDOM(taskValue) {
const li = document.createElement('li');
li.textContent = taskValue;

const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', () => {
taskList.removeChild(li);
removeTaskFromLocalStorage(taskValue);
});
li.appendChild(deleteButton);

taskList.appendChild(li);
}

function saveTaskToLocalStorage(task) {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}

function removeTaskFromLocalStorage(task) {
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks = tasks.filter(t => t !== task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
});
新增的功能解释
  • loadTasks()：在页面加载时，从 Local Storage 加载之前保存的任务。
  • addTaskToDOM(taskValue)：将传入的任务值添加到 DOM 中，是添加任务的一个独立功能。
  • saveTaskToLocalStorage(task)：将添加的任务存储到 Local Storage 中。
  • removeTaskFromLocalStorage(task)：在删除任务时，更新 Local Storage。

七、增强用户体验

7.1 输入框提示

为了增强用户体验，我们可以为输入框添加占位符以及澄清用户操作。

<input type="text" id="task-input" placeholder="添加新的任务..." aria-label="输入新的任务" required>

7.2 动画效果

我们还可以在任务的添加与删除时添加简单的动画效果，使其看起来更加流畅。通过 CSS 提供过渡效果：

在 styles.css 中更新任务列表的样式：

li {
transition: all 0.3s ease;
}

八、发布应用

8.1 准备发布

一旦你对应用的功能与外观满意，就可以将其发布到 Web 上。

  1. 选择托管服务：可以使用 GitHub Pages、Netlify、Vercel 等。
  2. 推送代码到 GitHub（如果使用版本控制）。

8.2 使用 GitHub Pages 发布

将项目托管到 GitHub Pages：

  1. 将项目推送到 GitHub。
  2. 在 GitHub 仓库的 Settings 中，找到 Pages 部分，选择 main 或 master 分支，并保存。
  3. 更新后，你可以在 https://yourusername.github.io/your-repo-name 上访问应用。

8.3 使用 Netlify 发布

  1. 访问 Netlify。
  2. 创建一个账户并链接至 GitHub。
  3. 在 Netlify 中选择你的项目并进行部署。

通过这次的实践，我们了解了 JavaScript 在网页设计中的应用以及如何通过简单的 HTML、CSS、和 JavaScript 构建一个待办事项应用。我们实现了动态添加、删除任务，并添加了数据持久化的功能。在用户体验上也做了一些增强，比如输入框的占位符和任务的动画效果。

这个简单的项目为我们深入学习前端开发打下了基础，今后你可以在此基础上加入更多的功能，如任务编辑、到期时间设定、任务分类等，进一步提升应用的复杂性与实用性。

vvvae1234
关注
javascript网页设计案例
丁爸的博客
09-01 923
我们能够创建一个功能丰富、用户体验良好的旅游网站。JavaScript在这里扮演了关键角色，它使得网站能够更加动态、更加互动。通过不断学习和实践，我们可以不断提升自己的JavaScript技能，创造出更多令人赞叹的网页设计作品。
HTML5CSS3JavaScript网页设计案例课堂.pptx
10-12
HTML5、CSS3、JavaScript网页设计案例课堂 本书《HTML5、CSS3、JavaScript网页设计案例课堂》是一本详细介绍网页设计基础知识的书籍，通过案例的方式介绍了HTML5、CSS3和JavaScript的使用。全书共分为12章，分别...
JavaScript网页设计案例
小透明的博客
09-14 920
JavaScript是一种轻量级的解释型脚本语言，支持面向对象、命令式和声明式编程。它是Web浏览器的核心组成部分，能够使网页具备动态功能。文档对象模型（DOM）是Web页面的结构表示，它将页面内容表示为一个由节点和对象组成的树形结构。JavaScript提供了丰富的API来操作DOM，实现对页面元素的增删改查。事件是用户与网页交互的基础，如点击按钮、鼠标移动等。JavaScript允许通过事件监听器来响应这些事件，执行相应的代码。
⭐️javascript网页设计案例
Python老吕的博客
09-03 3591
JavaScript（通常缩写为JS）是一种轻量级的编程语言，它被设计用于在网页上实现交互式效果，让用户可以与网页进行动态交互。最初由Netscape的Brendan Eich在1995年开发，JavaScript使得网页可以响应用户的操作，如按钮点击、表单提交等。电子商务网站需要提供商品浏览、搜索、购物车管理、用户认证和订单处理等功能。这些功能要求网站具有优秀的用户体验和高效的数据处理能力。交互式仪表板用于展示和分析数据，常见于企业级应用，如销售监控、网站分析等。
javascript网页设计案例1
2301_79698214的博客
09-12 307
上述代码创建了一个包含一个按钮和一个隐藏文本的简单网页。点击按钮后，隐藏文本将显示在网页上方的容器中。javascript网页设计案例1。
简单的JavaScript网页设计案例
借雨醉东风的博客
09-19 528
以下是一个简单的JavaScript网页设计案例，我们将创建一个简单的网页，其中包含一个按钮，当用户点击这个按钮时，网页上会显示一个欢迎消息。
JavaScript 网页设计案例：互动留言板
weidl001的博客
09-18 1323
这个互动留言板的设计展示了如何通过 JavaScript 操作 DOM 元素，动态生成内容并与用户交互。通过 JavaScript，可以轻松地为网页添加功能，如表单提交、动态列表创建、删除和修改等。同时，利用 localStorage 实现了简单的数据持久化，这为网页的增强型设计提供了更多可能性。 这只是 JavaScript 在网页开发中众多应用的一个小例子，随着对 JavaScript 更深入的学习和实践，你可以构建出更加复杂和实用的动态网页功能。
【热门主题】000002 案例 JavaScript网页设计案例
宝码香车的博客
09-29 1215
附完整源代码，可以直接复制使用。
javascript网页设计案例，非常详细
AI逍遥子
09-04 1406
这里我将为你提供一个详细的JavaScript网页设计案例。我们将创建一个简单的动态网页，包含一个可以显示当前时间的时钟和一个可以切换背景颜色的按钮。
Javascript网页设计案例 login登录页面.rar
09-04
以下是一个简单的JavaScript和HTML结合的网页设计案例，用于登录页面开发。 这个案例将使用HTML来构建页面结构，CSS来美化页面，以及JavaScript来添加动态功能。 （1）HTML 部分定义了页面的基本结构，包括两个...
HTML5+CSS3+JavaScript网页设计案例课堂
11-14
HTML5+CSS3+JavaScript网页设计案例课堂(刘玉红编著)。该资源中包含该书籍的电子书，课程源代码，以及课堂视频。由于资源过大，请下载txt文档，文档中有百度网盘的下载地址。
HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip
04-14
这个"HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip"压缩包很可能是用于教学或自学目的的资源，包含了一系列实际的网页设计案例和源代码。 HTML5作为最新的超文本标记语言版本，它引入了许多新特性，如...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 896
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 590
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 331
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1170
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 869
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值