案例-表白墙简单实现
文章目录
- 效果展示
- 初始画面
- 提交内容后画面（按键按下）
- 代码区
效果展示
初始画面
提交内容后画面（按键按下）
代码区
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title>
</head>
<style>* {margin: 0px;padding: 0px;}.total {width: 400px;margin: 0px auto; /*上下、左右*/}h1 {text-align: center;padding-bottom: 30px;}p {text-align: center;color: gray;}.div1 {display: flex;justify-content: center; /*水平方向*/align-items: center; /*垂直方向*/padding-top: 5px;}span {width: 80px;height: 30px;}#edit {width: 200px;height: 30px;}.submit {width: 280px;height: 30px;background-color: rgba(248, 236, 7, 0.942);border: none;border-radius: 5px;}.submit:active{background-color: grey;}
</style>
<body><div class="total"><h1>表白墙</h1><p>输入后请点击提交，会将信息显示在表格中</p><div class="div1"><span>谁：</span><input id="edit" class="who" type="text"></div><div class="div1"><span>对谁：</span><input id="edit" class="ofwho" type="text"></div><div class="div1"><span>说什么</span><input id="edit" class="what" type="text"></div><div class="div1"><input class="submit" type="button" value="提交" onclick="submit()"></div></div>
</body>
<script>function submit(){let containDiv = document.querySelectorAll('#edit')console.dir(containDiv)let from = containDiv[0].valuelet to = containDiv[1].valuelet message = containDiv[2].valueconsole.log(from+'对'+to+'说'+message)// 创建divlet nodeDiv = document.createElement('div')nodeDiv.className = 'div1'nodeDiv.innerHTML = from+'对'+to+'说'+messageconsole.log(nodeDiv)// 尾插divlet nodeparent = document.querySelector('.total')nodeparent.appendChild(nodeDiv)}
</script>
</html>
相关文章：
案例-表白墙简单实现
文章目录 效果展示初始画面提交内容后画面（按键按下） 代码区 效果展示 初始画面 提交内容后画面（按键按下） 代码区 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">…...
和鲸科技创始人范向伟：拐点即将来临，AI产业当前的三个瓶颈
在科技迅猛发展的时代，人工智能（AI）无疑已经成为引领新一轮产业革命的核心动力之一。全球企业纷纷拥抱AI技术，试图借助其变革力量在竞争中突围，然而业界对AI产业化的拐点何时来临却众说纷纭。毕竟AI技术从实验室到商业…...
基于函数计算FC 部署 ComfyUI实现AI生图 的优势
基于函数计算FC 部署 ComfyUI实现AI生图 的优势 部署ComfyUI实现AI生图使用函数计算FC 一键部署ComfyUI 绘画平台的优势有哪些？ 在文章开始之前，先来看一下基于函数计算FC 部署 ComfyUI实现AI生图 的大概步骤，整个基础部署操作比较简单。即便…...
瑞萨IDE：CS+ for CC编译过程中执行脚本文件
最近发现使用CS for CC IDE发现一个很有意思的功能。编译工程过程中，IDE自动执行Python脚本和批处理脚本，极大地提高开发效率。 编写好脚本文件后，在IDE中选择CC-RH（Build Tool）->Common Options->Others。 Co…...
在 CentOS 上安装 Docker 的步骤
在 CentOS 上安装 Docker 的步骤如下： 步骤 1：更新系统包 sudo yum update -y步骤 2：安装依赖包 确保安装了 yum-utils、device-mapper-persistent-data 和 lvm2，这些是 Docker 运行所需的依赖项： sudo yum instal…...
【C#生态园】探索地理信息系统软件套件与库：功能、API和应用
探索地理信息系统：软件套件与库详解 前言 地理信息系统（GIS）是当今世界上广泛使用的技术之一，它以空间数据为基础，能够提供丰富的地理信息分析和可视化功能。在GIS领域，有许多优秀的软件套件和库…...
Jupyter的使用分享
文章目录 碎碎念安装方法1.安装Anaconda方法2.通过库的安装方式 启动使用教程1.指定目录打开2.启动后的简单使用 小结 碎碎念 前情提示 之前与许多小伙伴交流的时候，发现大家对于pycharm更容易上手（可能是比较好设置中文的原因），在…...
24龙信比赛复现
案情简介： 近期，某公安机关接到受害人报案：通过微信添加认识一位相亲中介客服，客服邀约其与“相亲”对象进行选妃，受害人上钩后，整个过程被涉案团伙录音录像，同时，该客服以有更多的…...
PHP反射机制
HP反射机制是PHP语言中的一个强大特性，它允许程序在运行时检查、获取和操作类、方法、属性等元素的信息。这一机制极大地提高了PHP代码的灵活性和可维护性，使得开发者能够在不修改原有代码结构的情况下，动态地了解并操作代码。以下是对PHP反射…...
使用阿里云试用资源快速部署web应用-dofaker为例
本文介绍使用阿里云的试用资源部署dofaker的方法，本教程主要作学习在阿里云部署web应用之用，部署好应用之后，可以在任何地点通过公网ip访问web应用。 一、创建云主机 登录阿里云账户之后，点击控制台： 点击云服务器EC…...
需求11——解决字段无法清空的两个小bug
目录 背景 第一个小bug——问题阐述 第一个小bug——解决方案 第二个小bug——问题阐述 第二个小bug——解决方案 总结 背景 已经写了一个上午的文章了，写完这篇就可以去吃饭了。这也是这几个月的我写的最后一个小bug文章，把这篇文章写完就搞定了…...
（35）)
mysql学习教程，从入门到精通，SQL 创建索引(CREATE INDEX 语句)（35）
1、SQL 创建索引(CREATE INDEX 语句) 在SQL中，创建索引（CREATE INDEX）是一种用于提高数据库查询性能的方法。索引类似于书的目录，通过它可以更快地定位到表中的特定行。以下是一个创建索引的示例，以及对其各部分的解释…...
Pikachu-Cross-Site Scripting-DOM型xss_x
查看代码，输入的内容，通过get请求方式，用text 参数带过去； 获取text内容，赋值给xss 然后拼接到 dom 里；构造payload的关键语句： <a href"xss">就让往事都随风,都随风吧</a&…...
Pikachu-Cross-Site Scripting-xss之htmlspecialchars
首先输入各种字符 查看页面元素，可以看到这里对一些符号做了转换，但是 单引号等几个符号没处理； 从代码上看；使用单引号做闭合； 构造payload a onclickalert(11) 提交，得到xss攻击...
CSS基础中padding详解
文章目录 CSS基础中padding详解一、引言二、Padding基础1、Padding属性1.1、Padding的四个方向 2、Padding的值类型3、代码示例 三、Padding简写方法1、简写顺序2、简写规则3、代码示例 四、Padding对元素大小的影响1、解决方案1.1、Box-sizing属性1.2、计算实际宽度 五、总结 …...
OpenGL笔记十九之相机系统
OpenGL笔记十九之相机系统 —— 2024-10-02 晚上 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记十九之相机系统1.运行1.1.游戏相机1.2.轨迹球相机 2.游戏相机与轨迹球相机切换3.博主笔记本要运行需要更改的文件更改1:28_OpenGL_CameraSystem/applicat…...
P-Tuning v2：一种普遍有效的提示调整方法
人工智能咨询培训老师叶梓 转载标明出处 预训练语言模型通过微调（fine-tuning）来适应特定任务虽然效果显著，但存在训练成本高、参数存储量大等问题。为了解决这些问题，清华大学的研究者们提出了一种名为P-Tuning v2的提示调整&am…...
微信小程序启动不起来，报错凡是以~/包名/*.js路径的文件，都找不到，试过网上一切方法，最终居然这么解决的，【避坑】命运的齿轮开始转动
app.json "resolveAlias": {"~/*": "/*"},文件代码也没有问题，网上的方法试过来了，大模型AI也问过遍，熬夜到凌晨2点半，最不可思议的是居然是因为微信开发者工具版本的问题，我真的是笑死…...
C#串口温度读取
背景：每天学点，坚持 要安装好虚拟串口和modbus poll，方便调试（相关资源在文末，也可以私信找我要） 传感器部分使用的是达林科技的DL11B-MC-D1，当时42软妹币买的（官网上面有这个传感…...
2.5 Spring Boot整合Spring MVC框架
今天，我将向大家介绍如何在Spring Boot中整合Spring MVC框架，并展示如何创建和测试控制层（Controller）。 首先，让我们简要回顾一下Spring MVC。Spring MVC是一个基于Servlet的MVC框架，它简单、侵入性小&am…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！
【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起 程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么？ 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元（地址），其核心含义与能力如下： 1. 核心定义 地址位宽：CPU或内存控制器用32位…...
window 显示驱动开发-如何查询视频处理功能（三）
D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针，该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...
若依项目部署--传统架构--未完待续
若依项目介绍 项目源码获取 #Git工具下载 dnf -y install git #若依项目获取 git clone https://gitee.com/y_project/RuoYi-Vue.git项目背景 随着企业信息化需求的增加，传统开发模式存在效率低，重复劳动多等问题。若依项目通过整合主流技术框架&…...
AWSLambda之设置时区
目标 希望Lambda运行的时区是东八区。 解决 只需要设置lambda的环境变量TZ为东八区时区即可，即Asia/Shanghai。 参考 使用 Lambda 环境变量...