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

案例-表白墙简单实现

news 2026/5/20 4:49:18

文章目录

  • 效果展示
    • 初始画面
    • 提交内容后画面（按键按下）
  • 代码区

效果展示

初始画面

在这里插入图片描述

提交内容后画面（按键按下）

在这里插入图片描述

代码区

<!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>

相关文章：

案例-表白墙简单实现

文章目录 效果展示初始画面提交内容后画面&#xff08;按键按下&#xff09; 代码区 效果展示 初始画面 提交内容后画面&#xff08;按键按下&#xff09; 代码区 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">…...

编程日记 2024/10/9 22:38:08

和鲸科技创始人范向伟：拐点即将来临，AI产业当前的三个瓶颈

在科技迅猛发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑已经成为引领新一轮产业革命的核心动力之一。全球企业纷纷拥抱AI技术&#xff0c;试图借助其变革力量在竞争中突围&#xff0c;然而业界对AI产业化的拐点何时来临却众说纷纭。毕竟AI技术从实验室到商业…...

编程日记 2024/10/9 22:37:07

基于函数计算FC 部署 ComfyUI实现AI生图 的优势

基于函数计算FC 部署 ComfyUI实现AI生图 的优势 部署ComfyUI实现AI生图使用函数计算FC 一键部署ComfyUI 绘画平台的优势有哪些&#xff1f; 在文章开始之前&#xff0c;先来看一下基于函数计算FC 部署 ComfyUI实现AI生图 的大概步骤&#xff0c;整个基础部署操作比较简单。即便…...

编程日记 2024/10/9 22:36:06

瑞萨IDE：CS+ for CC编译过程中执行脚本文件

最近发现使用CS for CC IDE发现一个很有意思的功能。编译工程过程中&#xff0c;IDE自动执行Python脚本和批处理脚本&#xff0c;极大地提高开发效率。 编写好脚本文件后&#xff0c;在IDE中选择CC-RH&#xff08;Build Tool&#xff09;->Common Options->Others。 Co…...

编程日记 2024/10/9 22:34:02

在 CentOS 上安装 Docker 的步骤

在 CentOS 上安装 Docker 的步骤如下&#xff1a; 步骤 1&#xff1a;更新系统包 sudo yum update -y步骤 2&#xff1a;安装依赖包 确保安装了 yum-utils、device-mapper-persistent-data 和 lvm2&#xff0c;这些是 Docker 运行所需的依赖项&#xff1a; sudo yum instal…...

编程日记 2024/10/9 22:33:01

【C#生态园】探索地理信息系统软件套件与库：功能、API和应用

探索地理信息系统&#xff1a;软件套件与库详解 前言 地理信息系统&#xff08;GIS&#xff09;是当今世界上广泛使用的技术之一&#xff0c;它以空间数据为基础&#xff0c;能够提供丰富的地理信息分析和可视化功能。在GIS领域&#xff0c;有许多优秀的软件套件和库&#xf…...

编程日记 2024/10/9 22:32:00

Jupyter的使用分享

文章目录 碎碎念安装方法1.安装Anaconda方法2.通过库的安装方式 启动使用教程1.指定目录打开2.启动后的简单使用 小结 碎碎念 前情提示 之前与许多小伙伴交流的时候&#xff0c;发现大家对于pycharm更容易上手&#xff08;可能是比较好设置中文的原因&#xff09;&#xff0c;在…...

编程日记 2024/10/9 22:30:59

24龙信比赛复现

案情简介&#xff1a; 近期&#xff0c;某公安机关接到受害人报案&#xff1a;通过微信添加认识一位相亲中介客服&#xff0c;客服邀约其与“相亲”对象进行选妃&#xff0c;受害人上钩后&#xff0c;整个过程被涉案团伙录音录像&#xff0c;同时&#xff0c;该客服以有更多的…...

编程日记 2024/10/9 22:27:56

PHP反射机制

HP反射机制是PHP语言中的一个强大特性&#xff0c;它允许程序在运行时检查、获取和操作类、方法、属性等元素的信息。这一机制极大地提高了PHP代码的灵活性和可维护性&#xff0c;使得开发者能够在不修改原有代码结构的情况下&#xff0c;动态地了解并操作代码。以下是对PHP反射…...

编程日记 2024/10/9 22:25:54

使用阿里云试用资源快速部署web应用-dofaker为例

本文介绍使用阿里云的试用资源部署dofaker的方法&#xff0c;本教程主要作学习在阿里云部署web应用之用&#xff0c;部署好应用之后&#xff0c;可以在任何地点通过公网ip访问web应用。 一、创建云主机 登录阿里云账户之后&#xff0c;点击控制台&#xff1a; 点击云服务器EC…...

编程日记 2024/10/9 22:24:54

需求11——解决字段无法清空的两个小bug

目录 背景 第一个小bug——问题阐述 第一个小bug——解决方案 第二个小bug——问题阐述 第二个小bug——解决方案 总结 背景 已经写了一个上午的文章了&#xff0c;写完这篇就可以去吃饭了。这也是这几个月的我写的最后一个小bug文章&#xff0c;把这篇文章写完就搞定了…...

编程日记 2024/10/9 22:23:53

mysql学习教程，从入门到精通，SQL 创建索引(CREATE INDEX 语句)（35）

1、SQL 创建索引(CREATE INDEX 语句) 在SQL中&#xff0c;创建索引&#xff08;CREATE INDEX&#xff09;是一种用于提高数据库查询性能的方法。索引类似于书的目录&#xff0c;通过它可以更快地定位到表中的特定行。以下是一个创建索引的示例&#xff0c;以及对其各部分的解释…...

编程日记 2024/10/9 22:22:51

Pikachu-Cross-Site Scripting-DOM型xss_x

查看代码&#xff0c;输入的内容&#xff0c;通过get请求方式&#xff0c;用text 参数带过去&#xff1b; 获取text内容&#xff0c;赋值给xss 然后拼接到 dom 里&#xff1b;构造payload的关键语句&#xff1a; <a href"xss">就让往事都随风,都随风吧</a&…...

编程日记 2024/10/9 22:19:47

Pikachu-Cross-Site Scripting-xss之htmlspecialchars

首先输入各种字符 查看页面元素&#xff0c;可以看到这里对一些符号做了转换&#xff0c;但是 单引号等几个符号没处理&#xff1b; 从代码上看&#xff1b;使用单引号做闭合&#xff1b; 构造payload a onclickalert(11) 提交&#xff0c;得到xss攻击...

编程日记 2024/10/9 22:16:44

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、计算实际宽度 五、总结 …...

编程日记 2024/10/9 22:15:43

OpenGL笔记十九之相机系统

OpenGL笔记十九之相机系统 —— 2024-10-02 晚上 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记十九之相机系统1.运行1.1.游戏相机1.2.轨迹球相机 2.游戏相机与轨迹球相机切换3.博主笔记本要运行需要更改的文件更改1:28_OpenGL_CameraSystem/applicat…...

编程日记 2024/10/9 22:13:40

P-Tuning v2：一种普遍有效的提示调整方法

人工智能咨询培训老师叶梓 转载标明出处 预训练语言模型通过微调&#xff08;fine-tuning&#xff09;来适应特定任务虽然效果显著&#xff0c;但存在训练成本高、参数存储量大等问题。为了解决这些问题&#xff0c;清华大学的研究者们提出了一种名为P-Tuning v2的提示调整&am…...

编程日记 2024/10/9 22:11:38

微信小程序启动不起来，报错凡是以~/包名/*.js路径的文件，都找不到，试过网上一切方法，最终居然这么解决的，【避坑】命运的齿轮开始转动

app.json "resolveAlias": {"~/*": "/*"},文件代码也没有问题&#xff0c;网上的方法试过来了&#xff0c;大模型AI也问过遍&#xff0c;熬夜到凌晨2点半&#xff0c;最不可思议的是居然是因为微信开发者工具版本的问题&#xff0c;我真的是笑死…...

编程日记 2024/10/9 22:10:34

C#串口温度读取

背景&#xff1a;每天学点&#xff0c;坚持 要安装好虚拟串口和modbus poll&#xff0c;方便调试&#xff08;相关资源在文末&#xff0c;也可以私信找我要&#xff09; 传感器部分使用的是达林科技的DL11B-MC-D1&#xff0c;当时42软妹币买的&#xff08;官网上面有这个传感…...

编程日记 2024/10/9 22:09:33

2.5 Spring Boot整合Spring MVC框架

今天&#xff0c;我将向大家介绍如何在Spring Boot中整合Spring MVC框架&#xff0c;并展示如何创建和测试控制层&#xff08;Controller&#xff09;。 首先&#xff0c;让我们简要回顾一下Spring MVC。Spring MVC是一个基于Servlet的MVC框架&#xff0c;它简单、侵入性小&am…...

编程日记 2024/10/9 22:06:30

保姆级教程：用VASP+VTST脚本搞定CI-NEB过渡态计算（从编译到出图）

从零构建VASPVTST的CI-NEB计算体系&#xff1a;科研级过渡态求解实战指南 在计算材料科学领域&#xff0c;精确确定化学反应或扩散过程的过渡态结构是理解反应机理的关键。传统NEB方法虽能描绘反应路径&#xff0c;但对鞍点的定位精度有限——这正是CI-NEB方法的价值所在。本文…...

编程新知 2026/5/20 4:38:13

【MySQL百日打怪升级第8天】SELECT执行流程

【第8天】每天一个MySQL知识点&#xff0c;百日打怪升级 SQL基础&#xff1a;SELECT执行流程 大家好&#xff0c;我是一名拥有10年以上经验的DBA老兵。 做这个系列&#xff0c;源于一个朴素的愿望&#xff1a;把踩过的坑、总结的经验系统化输出&#xff0c;希望能帮到刚入行或…...

编程新知 2026/5/20 4:09:34

从U盘到高端SSD：一文搞懂FTL映射表（块/页/混合）的演进与实战选择

从U盘到高端SSD&#xff1a;一文搞懂FTL映射表&#xff08;块/页/混合&#xff09;的演进与实战选择 存储设备的性能差异往往隐藏在底层算法的设计哲学中。当你在电商平台对比两款SSD时&#xff0c;是否思考过为什么同样标称1TB容量的产品&#xff0c;价格能相差数倍&#xff…...

编程新知 2026/5/20 3:33:09

城市生活垃圾焚烧过程参数的智能自主设定方法【附程序】

✨ 长期致力于城市生活垃圾、焚烧过程、智能自主、参数设定、设定方法软件研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;基于学习型伪度量方法的焚烧…...

编程新知 2026/5/20 3:01:32

生物医学英文文献去哪查？

想追踪领域前沿&#xff0c;国际数据库访问不稳定&#xff0c;找篇文献要翻三四个平台&#xff1b;想梳理本土研究进展&#xff0c;中文核心资源分散在不同库&#xff0c;检索起来浪费大半天&#xff1b;要做学科趋势分析&#xff0c;各种工具功能碎片化&#xff0c;导出数据还…...

编程新知 2026/5/20 2:40:46

【MATLAB源码-第439期】基于MATLAB的APSK与QAM高阶调制在Saleh非线性功放下BER和EVM性能对比

操作环境&#xff1a;MATLAB 2024a1、算法描述摘要 高阶数字调制技术是现代无线通信和卫星通信系统提高频谱利用率的重要方法。QAM 调制通过同相分量和正交分量的幅度组合形成二维星座&#xff0c;在较高信噪比条件下能够获得较高的信息承载能力。APSK 调制则采用多环幅相结构&…...

编程新知 2026/5/20 1:33:01

紧急！你的灵感工作流正在被Perplexity范式淘汰：3个信号预警+2天迁移 checklist（含Prompt审计表）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;紧急&#xff01;你的灵感工作流正在被Perplexity范式淘汰&#xff1a;3个信号预警2天迁移 checklist&#xff08;含Prompt审计表&#xff09; 当你反复修改同一个提示词却仍得不到结构化输出&#xff0c;当团…...

编程新知 2026/5/19 22:19:11

避坑指南：在Docker里部署OpenWrt做软路由，这几个macvlan和网络配置的坑你别踩

DockerOpenWrt软路由避坑实战&#xff1a;macvlan网络疑难解析与高阶配置 当你在双网口服务器上尝试用Docker部署OpenWrt软路由时&#xff0c;是否经历过这样的绝望时刻&#xff1a;所有配置看似正确&#xff0c;但客户端设备就是无法上网&#xff1b;宿主机与容器仿佛身处平行…...

编程新知 2026/5/19 22:14:37

AI职业成长地图：软件测试从业者的精准发展路径

在AI技术重塑软件工程生态的当下&#xff0c;软件测试行业正经历从自动化到智能化的范式跃迁。2026年全球AI测试市场规模突破12亿美元&#xff0c;传统测试岗位需求年复合增长率不足2%&#xff0c;而AI测试工程师岗位增幅达45%。对于软件测试从业者而言&#xff0c;构建清晰的A…...

编程新知 2026/5/19 21:58:34

编码效率翻倍实测：OpenClaw 联动 Claude Code 实现 3 类数字员工协同的 4 步配置

1. 效率翻倍不是幻觉：OpenClaw 联动 Claude Code 的真实瓶颈在哪？ 我上线第三个用 OpenClaw + Claude Code 搭建的数字员工协同流水线时，把同一套接口自动化脚本重构任务交给两组人：一组纯人工，一组走 OpenClaw 管道。结果不是“快一点”，而是人工组平均耗时 47 分钟，A…...

编程新知 2026/5/19 20:52:56