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

JS网页设计案例

news 文章来源：https://blog.csdn.net/xq_123dd/article/details/142665056 2024/11/18 12:37:49

        下面是一个简单的 JavaScript 网页设计案例，展示了如何使用 HTML、CSS 和 JavaScript 创建一个动态的网页。

案例：简单的待办事项列表

1. HTML 部分
<!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="addTaskButton">添加任务</button><ul id="taskList"></ul></div><script src="script.js"></script>
</body>
</html>
2. CSS 部分 (styles.css)
body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;
}.container {max-width: 400px;margin: auto;background: white;padding: 20px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}h1 {text-align: center;
}input {width: calc(100% - 22px);padding: 10px;margin-bottom: 10px;
}button {width: 100%;padding: 10px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #218838;
}ul {list-style-type: none;padding: 0;
}li {padding: 10px;border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;
}li button {background-color: #dc3545;border: none;color: white;cursor: pointer;
}li button:hover {background-color: #c82333;
}
3. JavaScript 部分 (script.js)
document.getElementById('addTaskButton').addEventListener('click', function() {const taskInput = document.getElementById('taskInput');const taskValue = taskInput.value.trim();if (taskValue) {const taskList = document.getElementById('taskList');const li = document.createElement('li');li.textContent = taskValue;const deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.addEventListener('click', function() {taskList.removeChild(li);});li.appendChild(deleteButton);taskList.appendChild(li);taskInput.value = '';} else {alert('请输入任务内容');}
});

功能描述

  1. 输入框：用户可以在输入框中输入待办事项。
  2. 添加按钮：点击按钮后，会将输入的事项添加到列表中。
  3. 删除按钮：每个待办事项后面都有一个“删除”按钮，点击后可以删除该事项。

如何使用

  1. 将上面的代码分别保存为 index.html、styles.css 和 script.js 文件。
  2. 确保它们在同一文件夹中。
  3. 用浏览器打开 index.html，即可体验待办事项列表的功能。

相关文章：

JS网页设计案例

下面是一个简单的 JavaScript 网页设计案例&#xff0c;展示了如何使用 HTML、CSS 和 JavaScript 创建一个动态的网页。 案例&#xff1a;简单的待办事项列表 1. HTML 部分 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8…...

编程日记 2024/10/1 4:14:13

4.2.1 通过DTS传递物理中断号给Linux

点击查看系列文章 》 Interrupt Pipeline系列文章大纲-CSDN博客 4.2.1 通过DTS传递物理中断号给Linux 参考《GICv3_Software_Overview_Official_Release_B》&#xff0c;下表描述了GIC V3支持的INTID(硬件中断号)的范围。 SGI (Software Generated Interrupt)&#xff1a;软…...

编程日记 2024/10/1 4:12:10

常用性能优化方法

在一个Java项目中进行性能优化是至关重要的。性能优化能够提高项目的效率和响应速度&#xff0c;提升用户体验&#xff0c;并且可以节省服务器资源和成本。 首先&#xff0c;性能优化可以确保项目的高效运行。当项目在运行时&#xff0c;性能问题可能会导致应用程序变慢、响应时…...

编程日记 2024/10/1 4:07:06

上海我店：创新模式引领本地生活新风尚

近年来&#xff0c;一个名为“上海我店”的新兴平台在网络空间中迅速崛起&#xff0c;其公布的业绩令人瞩目——在短短三年内&#xff0c;交易流水已跨越百亿大关&#xff0c;并在最近一个月内迎来了近百万的新增注册用户。这一强劲的增长势头&#xff0c;无疑吸引了众多商家和…...

编程日记 2024/10/1 4:04:04

【微服务】前端微服务qiankun 2.x主子应用通信代码片段

主应用代码 主应用工程里面源代码新建qiankun/index.js&#xff0c;通信代码如下&#xff1a; import { initGlobalState } from "qiankun"; import store from /store// 主应用与微应用数据通信 const state {subappClassName: // 设置子应用打包根的class类名 …...

编程日记 2024/10/1 4:03:03

高级java每日一道面试题-2024年9月30日-算法篇-LRU是什么?如何实现?

如果有遗漏,评论区告诉我进行补充 面试官: LRU是什么?如何实现? 我回答: LRU&#xff08;Least Recently Used&#xff09;是一种常用的缓存淘汰策略&#xff0c;用于在缓存满时决定哪些数据应该被移除。LRU算法的基本思想是&#xff1a;当缓存达到其容量上限时&#xff0…...

编程日记 2024/10/1 4:02:02

CSS选择器的全面解析与实战应用

CSS选择器的全面解析与实战应用 一、基本选择器1.1 通配符选择器&#xff08;*&#xff09;2.标签选择器&#xff08;div&#xff09;1.3 类名选择器&#xff08;.class&#xff09;4. id选择器&#xff08;#id&#xff09; 二、 属性选择器&#xff08;attr&#xff09;三、伪…...

编程日记 2024/10/1 4:01:01

vue3自动暴露element-plus组件的ref

自动暴露子组件的方法&#xff0c;注意在TS下&#xff0c;需要自己声明类型&#xff0c;我这里全用any代替了 <template><el-button click"getFocus">获得焦点</el-button><com ref"comRef" /> </template><script setup…...

编程日记 2024/10/1 4:00:00

龙芯+FreeRTOS+LVGL实战笔记（新）——10蜂鸣器嘀嘀嘀

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇，主要的区别在于实时操作系统的不同，章节的安排和任务的推进保持一致，并对源码做了完善与优化，各位可以先到本人主页下去浏览另一专栏的博客列表（目前已撰写36篇，图1所示），再决定是否订阅。此外，也可以…...

编程日记 2024/10/1 3:58:58

微信小程序-数据模型与动态赋值

首先新建一个小程序项目. 这边有创建基础项目的流程:从0新建一个微信小程序实现一个简单跳转_小白开发小程序源代码-CSDN博客 一共两步: 1.建立页面的 数据模型 和 默认赋值: 默认赋值: 2.接收输入框的新文案,动态替换上面的文案展示 //文件 testUI.js增加方法:onInputChan…...

编程日记 2024/10/1 3:56:56

【Redis】Linux下安装配置及通过C++访问Redis

文章目录 一、Linux Centos 7.0版本下的安装及配置二、通过C访问Redis 一、Linux Centos 7.0版本下的安装及配置 通过源来安装&#xff0c;此次安装的版本为 redis 5.0 的&#xff0c;要通过其他源进行安装&#xff0c;首先安装 scl 源 yum install centos-release-scl-rh再安…...

编程日记 2024/10/1 3:55:55

Python 入门教程（4）数据类型 | 4.7、元组

文章目录 一、元组1、定义2、创建3、访问元组元素4、遍历元组5、 前言&#xff1a; 在Python编程中&#xff0c;元组&#xff08;tuple&#xff09;是一种内置的数据结构&#xff0c;它提供了一种存储多个项目&#xff08;元素&#xff09;的方式&#xff0c;这些项目可以是不同…...

编程日记 2024/10/1 3:53:53

Temu正在吸引越来越多的亚马逊卖家，这个市场Temu蝉联下载榜首

近年来&#xff0c;全球电商市场竞争愈发激烈&#xff0c;各大平台纷纷使出浑身解数&#xff0c;以期在激烈的市场竞争中脱颖而出。 一个来自中国的新兴电商平台——Temu&#xff0c;凭借其独特的市场策略和迅猛的发展势头&#xff0c;正在吸引越来越多的亚马逊卖家。Temu为美国…...

编程日记 2024/10/1 3:52:51

设计原则模式概览

前言 架构设计是软件系统稳定的核心因素&#xff0c;也是程序员晋级架构师的核心因素&#xff0c;建议日常开发过程中针对设计进行深挖与思考 核心 分清楚哪些是稳定的&#xff0c;哪些是变化的&#xff08;一定有稳定跟变化的成分&#xff09;&#xff1b; 捋清楚哪些是类设计…...

编程日记 2024/10/1 3:50:48

高级主题：接口性能测试与压力测试

在现代软件开发中&#xff0c;确保接口的性能和稳定性是非常重要的。随着用户数量的增加&#xff0c;接口需要能够承受高并发请求&#xff0c;从而保证良好的用户体验。本篇文章将介绍如何使用 Python 工具 Locust 进行接口性能测试和压力测试&#xff0c;分析测试结果&#xf…...

编程日记 2024/10/1 3:49:47

python绘制图像

柱状图 import os# 输入想要存储图像的路径 os.chdir(D:)import matplotlib.pyplot as plt import numpy as np # 改变绘图风格 import seaborn as snssns.set(color_codesTrue)cell [gen7, xgspon, 3081GB, vettel, totalplay, other] pvalue [21, 20, 18, 13, 7, 34]width…...

编程日记 2024/10/1 3:47:42

如何修复变砖的手机并恢复丢失的数据

您可能之前听说过“变砖”&#xff0c;但您知道什么是变砖手机吗&#xff1f;正如许多论坛中经常提出的问题一样&#xff0c;我如何知道我的手机是否变砖了&#xff1f;好吧&#xff0c;手机变砖主要有两种类型&#xff0c;即软件变砖和硬变砖。软变砖手机意味着重启后您仍然可…...

编程日记 2024/10/1 3:46:41

服务器使用了代理ip，遇到流量攻击，会对服务器有影响吗

当服务器使用代理IP并遭遇流量攻击&#xff08;如DDoS攻击&#xff09;时&#xff0c;仍然会对服务器产生影响。以下是关于这种情况的一些详细分析&#xff1a; 1. 流量攻击的性质 流量攻击的目的是通过发送大量请求来耗尽目标服务器的资源或带宽&#xff0c;导致服务中断或不…...

编程日记 2024/10/1 3:44:39

从存储到人工智能洞察： 利用 MinIO 和 Polars 简化数据管道

将 MinIO 的高性能、可扩展企业对象存储的强大功能与 Polars&#xff08;闪电般快速的 DataFrame 库&#xff09;的快速内存数据处理功能相结合&#xff0c;可以显著提高数据管道的性能。在 AI 工作流中尤其如此&#xff0c;其中预处理大型数据集和执行特征选择是关键步骤。在这…...

编程日记 2024/10/1 3:43:38

只需要 1 分钟语音数据实现声音克隆

只需要 1 分钟语音数据实现声音克隆 GPT-SoVITS 是一个基于少量语音数据&#xff08;1 分钟左右&#xff09;即可训练出高质量 TTS&#xff08;文本转语音&#xff09;模型的开源项目&#xff0c;提供少样本语音克隆能力。目前该开源项目已经获得了 33.2k 的 Star&#xff01;…...

编程日记 2024/10/1 3:41:37

OpenEuler虚拟机安装保姆级教程 | 附可视化界面

0x00 系统介绍 在 2019 年 7 月 19 日&#xff0c;华为宣布要在年底正式开源 openEuler 操作系统&#xff1b;在半年后的 12 月 31 日&#xff0c;华为正式开源了 openEuler 操作系统&#xff0c;邀请社区开发者共同来贡献。 一年后&#xff0c;截止到 2020 年12 月 25日&…...

编程日记 2024/10/1 3:36:31

表格控件QTableWidget

下面说一下表格的常用方法 行列数目、行表头、列表头 行表头&#xff1a;就是表格控件的第一行&#xff0c;用于设置每一列的标题 列表头&#xff1a;就是表格控件的第一列&#xff0c;用于设置每一行的标题&#xff0c;通常缺省则默认显示行号 设置和获取行列的数目 在添…...

编程日记 2024/10/1 3:34:29

LeetCode236题：二叉树的最近公共祖先

给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自己的祖…...

编程日记 2024/10/1 3:33:28

虚谷中使用PL/SQL改变模式下所有表的大小写

一、将表名转换为小写 1、原理和思路 首先&#xff0c;我们需要查询出指定模式下的所有表名&#xff0c;在xugu中&#xff0c;数据字典dba_tables包含了当前库下的所有表信息&#xff0c;我们可以使用游标&#xff08;CURSOR&#xff09;来遍历这些表名。 2、代码示例如下&am…...

编程日记 2024/10/1 3:32:27

数据挖掘的基本步骤和流程解析：深入洞察与策略实施

一、引言 在数据时代的浪潮中&#xff0c;数据挖掘技术已成为企业洞察市场、优化运营和驱动创新的利器。 它融合了统计学、机器学习、数据库管理和人工智能等领域的先进技术&#xff0c;旨在从海量数据中 提取有价值的信息。 本文将深入探讨数据挖掘的六个基本步骤&#xff0c…...

编程日记 2024/10/1 3:29:25

BCJR算法——卷积码的最大后验译码

定义&#xff1a;输入序列为 其中每比特&#xff0c;同时相应的输出序列为 其中每一码字的长度为n&#xff0c;定义在i时刻的编码器的状态为&#xff0c;对于时刻里有 表示输出码字和卷积码第i时刻的输入和第i-1时刻的状态有关&#xff08;包括寄存器和输出部分&#xff09;&am…...

编程日记 2024/10/1 3:28:24

系统架构设计师论文《论SOA在企业集成架构设计中的应用》精选试读

论文真题 企业应用集成(Enterprise Application Integration, EAI)是每个企业都必须要面对的实际问题。面向服务的企业应用集成是一种基于面向服务体系结构(Service-OrientedArchitecture,SOA&#xff09;的新型企业应用集成技术&#xff0c;强调将企业和组织内部的资源和业务…...

编程日记 2024/10/1 3:26:20

ceph rgw 桶分片之reshard

Ceph RGW&#xff08;RADOS Gateway&#xff09;的 reshard 功能是用来动态调整对象存储的分片&#xff08;shard&#xff09;数量&#xff0c;从而优化性能和存储利用率。随着数据量的增加&#xff0c;初始的分片设置可能无法满足性能需求&#xff0c;因此 reshard 功能允许用…...

编程日记 2024/10/1 3:25:19

开放原子开源基金会网站上的开源项目Opns存在缓冲区溢出缺陷

最近在开放原子开源基金会网站上&#xff0c;看到一些开源项目&#xff0c;之前分析出华为的鸿蒙操作系统代码&#xff0c;没有发现有价值的安全漏洞。现在&#xff0c;下载上面的Onps开源网络协议栈&#xff0c;既然是通讯所使用的软件&#xff0c;其质量应该值得信任呢&#…...

编程日记 2024/10/1 3:24:18

未来前端发展方向：深度探索与技术前瞻

未来前端发展方向&#xff1a;深度探索与技术前瞻 在数字化浪潮席卷全球的今天&#xff0c;前端开发作为连接用户与数字世界的桥梁&#xff0c;其重要性不言而喻。随着技术的不断进步和市场的不断变化&#xff0c;前端开发领域正经历着前所未有的变革。今天&#xff0c;我们将深…...

编程日记 2024/10/1 3:23:17

外网专门做钙片的网站/百度一级代理商

html5获取手机GPS信息的示例代码function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { alert("浏览器不支持地理定位。"); } } function showError(error) { switch (error.code) {…...

编程日记 2024/11/18 8:26:40

南通网站建设方案服务/重庆seo排名优化

1,先到Oracle网站下载Instant Client : http://www.oracle.com/technology/global/cn/software/tech/oci/instantclient/index.html 根据你的操作系统选择不同的Instant Client版本 下载回是一个压缩文件,解压之后的文件夹叫:D:/instantclient_11_2.放在你喜欢的目录即可.例如:…...

编程日记 2024/11/18 7:36:34

海外建站推广/app推广软文范文

上篇博客中&#xff0c;已经实现了一个Struts例子&#xff0c;现在就来分析下这个例子。详细的解读Struts1。 Struts1的几个核心组件是值得我们注意的&#xff1a; &#xff08;1&#xff09;ActionServlet(核心控制器)。 &#xff08;2&#xff09;ActionForm(接收页面中传…...

编程日记 2024/11/18 7:10:16

建设银行纪检监察网站/10条重大新闻事件

一、体系结构ORACLE是一个具有跨平台特性的数据库&#xff0c;ORACLE SERVER分为database和instance。数据文件、控制文件、联机重做日志、参数文件、密码文件等组合称为database。一个database可以被一个或多个instance mount。instance由内存区和后台进程组成。二、instance内…...

编程日记 2024/11/18 5:02:12

网站做显卡评测软件/google推广平台怎么做

Seems like a lot of my posts lately have started with something like "Heres a weird IE bug" or "Heres something odd in .NET" but... 似乎我最近的许多帖子都是以“这是一个奇怪的IE错误”或“这是.NET中的奇怪内容”开头的&#xff0c;但是... He…...

编程日记 2024/11/18 3:45:09

企业网站的建设过程/保定seo推广外包

class Solution:找到数组中结果与k接近的3个元素def threeSumClosest(self, numbers, target):# 排序numbers.sort()# 最接近的和ans None# 结果列表res []for i in range(len(numbers)):left, right i 1, len(numbers) - 1# 从i号位置开始搜索&#xff0c;i0时搜索右边所有…...

编程日记 2024/11/18 1:58:28