JS网页设计案例
下面是一个简单的 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('请输入任务内容');}
});
功能描述
- 输入框：用户可以在输入框中输入待办事项。
- 添加按钮：点击按钮后，会将输入的事项添加到列表中。
- 删除按钮：每个待办事项后面都有一个“删除”按钮，点击后可以删除该事项。
如何使用
- 将上面的代码分别保存为
index.html、styles.css和script.js文件。 - 确保它们在同一文件夹中。
- 用浏览器打开
index.html，即可体验待办事项列表的功能。
相关文章：
JS网页设计案例
下面是一个简单的 JavaScript 网页设计案例，展示了如何使用 HTML、CSS 和 JavaScript 创建一个动态的网页。 案例：简单的待办事项列表 1. HTML 部分 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8…...
4.2.1 通过DTS传递物理中断号给Linux
点击查看系列文章 》 Interrupt Pipeline系列文章大纲-CSDN博客 4.2.1 通过DTS传递物理中断号给Linux 参考《GICv3_Software_Overview_Official_Release_B》，下表描述了GIC V3支持的INTID(硬件中断号)的范围。 SGI (Software Generated Interrupt)：软…...
常用性能优化方法
在一个Java项目中进行性能优化是至关重要的。性能优化能够提高项目的效率和响应速度，提升用户体验，并且可以节省服务器资源和成本。 首先，性能优化可以确保项目的高效运行。当项目在运行时，性能问题可能会导致应用程序变慢、响应时…...
上海我店：创新模式引领本地生活新风尚
近年来，一个名为“上海我店”的新兴平台在网络空间中迅速崛起，其公布的业绩令人瞩目——在短短三年内，交易流水已跨越百亿大关，并在最近一个月内迎来了近百万的新增注册用户。这一强劲的增长势头，无疑吸引了众多商家和…...
【微服务】前端微服务qiankun 2.x主子应用通信代码片段
主应用代码 主应用工程里面源代码新建qiankun/index.js，通信代码如下： import { initGlobalState } from "qiankun"; import store from /store// 主应用与微应用数据通信 const state {subappClassName: // 设置子应用打包根的class类名 …...
高级java每日一道面试题-2024年9月30日-算法篇-LRU是什么?如何实现?
如果有遗漏,评论区告诉我进行补充 面试官: LRU是什么?如何实现? 我回答: LRU（Least Recently Used）是一种常用的缓存淘汰策略，用于在缓存满时决定哪些数据应该被移除。LRU算法的基本思想是：当缓存达到其容量上限时࿰…...
CSS选择器的全面解析与实战应用
CSS选择器的全面解析与实战应用 一、基本选择器1.1 通配符选择器（*）2.标签选择器（div）1.3 类名选择器（.class）4. id选择器（#id） 二、 属性选择器（attr）三、伪…...
vue3自动暴露element-plus组件的ref
自动暴露子组件的方法，注意在TS下，需要自己声明类型，我这里全用any代替了 <template><el-button click"getFocus">获得焦点</el-button><com ref"comRef" /> </template><script setup…...
龙芯+FreeRTOS+LVGL实战笔记（新）——10蜂鸣器嘀嘀嘀
本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇，主要的区别在于实时操作系统的不同，章节的安排和任务的推进保持一致，并对源码做了完善与优化，各位可以先到本人主页下去浏览另一专栏的博客列表（目前已撰写36篇，图1所示），再决定是否订阅。此外，也可以…...
微信小程序-数据模型与动态赋值
首先新建一个小程序项目. 这边有创建基础项目的流程:从0新建一个微信小程序实现一个简单跳转_小白开发小程序源代码-CSDN博客 一共两步: 1.建立页面的 数据模型 和 默认赋值: 默认赋值: 2.接收输入框的新文案,动态替换上面的文案展示 //文件 testUI.js增加方法:onInputChan…...
【Redis】Linux下安装配置及通过C++访问Redis
文章目录 一、Linux Centos 7.0版本下的安装及配置二、通过C访问Redis 一、Linux Centos 7.0版本下的安装及配置 通过源来安装，此次安装的版本为 redis 5.0 的，要通过其他源进行安装，首先安装 scl 源 yum install centos-release-scl-rh再安…...
Python 入门教程（4）数据类型 | 4.7、元组
文章目录 一、元组1、定义2、创建3、访问元组元素4、遍历元组5、 前言： 在Python编程中，元组（tuple）是一种内置的数据结构，它提供了一种存储多个项目（元素）的方式，这些项目可以是不同…...
Temu正在吸引越来越多的亚马逊卖家，这个市场Temu蝉联下载榜首
近年来，全球电商市场竞争愈发激烈，各大平台纷纷使出浑身解数，以期在激烈的市场竞争中脱颖而出。 一个来自中国的新兴电商平台——Temu，凭借其独特的市场策略和迅猛的发展势头，正在吸引越来越多的亚马逊卖家。Temu为美国…...
设计原则模式概览
前言 架构设计是软件系统稳定的核心因素，也是程序员晋级架构师的核心因素，建议日常开发过程中针对设计进行深挖与思考 核心 分清楚哪些是稳定的，哪些是变化的（一定有稳定跟变化的成分）； 捋清楚哪些是类设计…...
高级主题：接口性能测试与压力测试
在现代软件开发中，确保接口的性能和稳定性是非常重要的。随着用户数量的增加，接口需要能够承受高并发请求，从而保证良好的用户体验。本篇文章将介绍如何使用 Python 工具 Locust 进行接口性能测试和压力测试，分析测试结果…...
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…...
如何修复变砖的手机并恢复丢失的数据
您可能之前听说过“变砖”，但您知道什么是变砖手机吗？正如许多论坛中经常提出的问题一样，我如何知道我的手机是否变砖了？好吧，手机变砖主要有两种类型，即软件变砖和硬变砖。软变砖手机意味着重启后您仍然可…...
服务器使用了代理ip，遇到流量攻击，会对服务器有影响吗
当服务器使用代理IP并遭遇流量攻击（如DDoS攻击）时，仍然会对服务器产生影响。以下是关于这种情况的一些详细分析： 1. 流量攻击的性质 流量攻击的目的是通过发送大量请求来耗尽目标服务器的资源或带宽，导致服务中断或不…...
从存储到人工智能洞察： 利用 MinIO 和 Polars 简化数据管道
将 MinIO 的高性能、可扩展企业对象存储的强大功能与 Polars（闪电般快速的 DataFrame 库）的快速内存数据处理功能相结合，可以显著提高数据管道的性能。在 AI 工作流中尤其如此，其中预处理大型数据集和执行特征选择是关键步骤。在这…...
只需要 1 分钟语音数据实现声音克隆
只需要 1 分钟语音数据实现声音克隆 GPT-SoVITS 是一个基于少量语音数据（1 分钟左右）即可训练出高质量 TTS（文本转语音）模型的开源项目，提供少样本语音克隆能力。目前该开源项目已经获得了 33.2k 的 Star！…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
)
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库（uthash库）提供对哈希表的操作，文章如下： C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）
一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...
springboot 日志类切面，接口成功记录日志，失败不记录
springboot 日志类切面，接口成功记录日志，失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
xmind转换为markdown
文章目录 解锁思维导图新姿势：将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件（ZIP处理）2.解析JSON数据结构3：递归转换树形结构4：Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要：在消费市场竞争日益激烈的当下，传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序，探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式，分析沉浸式体验的优势与价值…...