首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Java Script网页设计案例

编程知识
2024年08月29日 21:27

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">  
</head>  
<body>  
    <h1>Todo List</h1>  
    <input type="text" placeholder="Add new todo...">  
    <button onclick="addTodo()">Add Todo</button>  
    <ul>  
        <!-- 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>  
    <img src="image1.jpg" alt="Image 1">  
    <img src="image2.jpg" alt="Image 2">  
    <!-- 更多图片 -->  
</div>  
  
<div>  
    <span>&times;</span>  
    <img>  
</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" placeholder="Enter city">  
<button>Get Weather</button>  
<div></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网页开发的良好起点,并可以根据实际需求进行扩展和定制。

From:https://www.cnblogs.com/TS86/p/18387646
本文地址: http://www.shuzixingkong.net/article/1564
0评论
提交 加载更多评论
其他文章 CMake构建学习笔记11-minizip库的构建
准确来说,minizip其实是zlib提供的辅助工具,位于zlib库的contrib文件夹内。minizip提供了更为高级一点的接口,能直接操作文件进行压缩。不过,有点麻烦的是这个工具并没有提供CMake构建的方式。那么可以按照构建giflib的方式,自己组织CMakeList.txt,正好这个项目
一篇文章讲清楚Java中的反射
介绍 每个类都有一个 Class 对象,包含了与类有关的信息。当编译一个新类时,会产生一个同名的 .class 文件,该文件内容保存着 Class 对象。 类加载相当于 Class 对象的加载。类在第一次使用时才动态加载到 JVM 中,可以使用 Class.forName(&quot;com.mys
一篇文章讲清楚Java中的反射
【Azure Policy】添加策略用于审计Azure 网络安全组(NSG)规则 -- 只能特定的IP地址允许3389/22端口访问
问题描述 对Azure上的虚拟机资源,需要进行安全管理。只有指定的IP地址才能够通过RDP/SSH远程到虚拟机上, 有如下几点考虑: 1) 使用Azure Policy服务,扫描订阅中全部的网络安全组(NSG: Network Security Group) 资源 2) 判断入站规则,判断是否是33
【Azure Policy】添加策略用于审计Azure 网络安全组(NSG)规则 -- 只能特定的IP地址允许3389/22端口访问 【Azure Policy】添加策略用于审计Azure 网络安全组(NSG)规则 -- 只能特定的IP地址允许3389/22端口访问
.NET 摄像头采集
本文主要介绍摄像头(相机)如何采集数据,用于类似摄像头本地显示软件,以及流媒体数据传输场景如传屏、视讯会议等。 摄像头采集有多种方案,如AForge.NET、WPFMediaKit、OpenCvSharp、EmguCv、DirectShow.NET、MediaCaptre(UWP),网上一些文章以及
.NET 摄像头采集 .NET 摄像头采集
二. Spring Boot 中的 “依赖管理和自动配置” 详解透彻到底(附+详细代码流程)
二. Spring Boot 中的 “依赖管理和自动配置” 详解透彻到底(附+详细代码流程) @目录二. Spring Boot 中的 “依赖管理和自动配置” 详解透彻到底(附+详细代码流程)1. 如何理解 “ 约定优于配置 ”2. Spring Boot 依赖管理 和 自动配置2.1 Spring
二. Spring Boot 中的 “依赖管理和自动配置” 详解透彻到底(附+详细代码流程) 二. Spring Boot 中的 “依赖管理和自动配置” 详解透彻到底(附+详细代码流程) 二. Spring Boot 中的 “依赖管理和自动配置” 详解透彻到底(附+详细代码流程)
ggml 简介
ggml 是一个用 C 和 C++ 编写、专注于 Transformer 架构模型推理的机器学习库。该项目完全开源,处于活跃的开发阶段,开发社区也在不断壮大。ggml 和 PyTorch、TensorFlow 等机器学习库比较相似,但由于目前处于开发的早期阶段,一些底层设计仍在不断改进中。 相比于
ggml 简介
Hive源码解析
1.概述 Apache Hive是一款建立在Hadoop之上的数据仓库工具,它提供了类似于SQL的查询语言,使得用户能够通过简单的SQL语句来处理和分析大规模的数据。本文将深入分析Apache Hive的源代码,探讨其关键组件和工作原理,以便更好地理解其在大数据处理中的角色。 2.内容 在开始源代码
Hive源码解析 Hive源码解析 Hive源码解析
全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO、LIFO、优先级队列、双端队列和环形队列)
在 Python 中,队列(Queue)是一种常用的数据结构,用于按照特定的顺序存储和访问数据。队列的主要类型包括先进先出(FIFO)、后进先出(LIFO)、优先级队列、双端队列(Deque)和环形队列,每种队列在不同的应用场景中都有其独特的用途。
全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO、LIFO、优先级队列、双端队列和环形队列) 全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO、LIFO、优先级队列、双端队列和环形队列) 全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO、LIFO、优先级队列、双端队列和环形队列)