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

实现的一个网页版的简易表白墙

news 2026/5/25 8:10:13

实现的一个网页版的表白墙

实现效果

image-20240307134439192

代码截图

image-20240307215605013

相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><h1>表白墙</h1><P>输入相关信息，点击提交后将会展示在表格中</P><div class="div1"><span>谁：</span><input type="text" class="edit"></div><div class="div1"><span>对谁：</span><input type="text" class="edit"></div><div class="div1"><span>说：</span><input type="text" class="edit"></div><div class="div1"><input type="button" value="提交" class="submit" onclick="Submit()"></div></div>
</body>
<style>* {margin: 0px;padding: 0px;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;margin-bottom: 20px;margin-top: 40px;}p {text-align: center;color: gray;line-height: 63px;}.div1 {display: flex;justify-content: center;align-items: center;}.edit {margin-bottom: 20px;width: 200px;height: 30px;}span {width: 50px;margin-bottom: 20px;}.submit {background-color: rgb(255, 136, 0);color: white;width: 254px;height: 40px;border: none;border-radius: 5px;}.submit:active {background-color: gray;}</style>
<script>function Submit() {let edits = document.querySelectorAll('.edit')let from  = edits[0].valuelet to  = edits[1].valuelet message = edits[2].valueif(from == "" || to == "" || message == "") {return}let div = document.createElement('div')div.className = 'div1'div.innerHTML =   from + " 对 " + to + "说：" + message let container = document.querySelector('.container')container.appendChild(div)for(i = 0; i < edits.length; i++) {edits[i].value = "";}
}
</script>
</html>

相关文章：

实现的一个网页版的简易表白墙

实现的一个网页版的表白墙 实现效果 代码截图 相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…...

编程日记 2024/3/14 19:21:08

随身WiFi靠谱吗？ 看完这篇文章你就懂了？2024随身wifi靠谱品牌推荐

在网络如此发达&#xff0c;随身WiFi如此普遍的2024年&#xff0c;仍有人在质疑随身WiFi到底靠不靠谱&#xff0c;有没有用处。其实只需要回答两个问题&#xff1a; 1、你的流量够用吗&#xff1f;手机的流量包和随身WiFi套餐哪个更便宜&#xff1f; 2、手机流量不够用&#x…...

编程日记 2024/3/14 19:12:58

mysql的trace追踪SQL工具，进行sql优化

trace是MySQL5.6版本后提供的SQL跟踪工具&#xff0c;通过使用trace可以让我们明白optimizer&#xff08;优化器&#xff09;如何选择执行计划。 注意&#xff1a;开启trace工具会影响mysql性能&#xff0c;所以只适合临时分析sql使用&#xff0c;用完之后请立即关闭。 测试数…...

编程日记 2024/3/14 19:10:56

docker部署springboot jar包项目

docker部署springboot jar包项目 前提&#xff0c;服务器环境是docker环境&#xff0c;如果服务器没有安装docker&#xff0c;可以先安装docker环境。 各个环境安装docker&#xff1a; Ubuntu上安装Docker&#xff1a; ubuntu离线安装docker: CentOS7离线安装Docker&#xff1…...

编程日记 2024/3/14 19:07:52

一个八年工作经验老程序员的分享

作为一个 Java 程序员&#xff0c;我在这个行业中工作了多年。在这个过程中&#xff0c;我经历了许多挑战和机遇&#xff0c;也学到了很多宝贵的经验和教训。在这篇文章中&#xff0c;我想分享一些我的感想和思考&#xff0c;希望能够对其他 Java 程序员有所帮助。 一、技术的…...

编程日记 2024/3/14 18:59:42

代码随想录算法训练营第四十三天|动态规划|1049. 最后一块石头的重量 II、494. 目标和、474.一和零

1049. 最后一块石头的重量 II 文章 有一堆石头&#xff0c;每块石头的重量都是正整数。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果如下&#xff1a; 如果 x y&a…...

编程日记 2024/3/14 18:58:41

vue3+elementPlus：el-table-column表格列动态设置单元格颜色

:cell-style属性 //html<el-tableempty-text"暂无数据":data"datalist.table":max-height"height"row-key"id"border:cell-style"cellStyle"> <el-table>//js //动态设置单元格颜色 const cellStyle ({ row, c…...

编程日记 2024/3/14 18:57:40

python和shell脚本，每隔五分钟将远端服务器中的文件夹数据下载到跳板机

python脚本 import subprocess import datetime import timedef run_scp_command(source_path, target_path):command [scp -r , source_path, target_path]try:subprocess.run(command, checkTrue)print("File transferred successfully!")except subprocess.Call…...

编程日记 2024/3/14 18:54:37

Websocket在Asp.net webApi（.net framework）上的应用

之前在写看板部分的web api的时候&#xff0c;都是通过Ajax在规定时间内轮询调用web api&#xff0c;这样简单省事&#xff0c;但是当看板多了&#xff08;并发量上来&#xff09;以后&#xff0c;比较消耗服务器的性能&#xff0c;所以最近研究了websocket&#xff0c;希望使用…...

编程日记 2024/3/14 18:53:36

App前端开发跨平台框架比较：React Native、Flutter、Xamarin等

引言 移动应用开发领域的跨平台框架正在不断演进&#xff0c;为开发者提供更多选择。在本文中&#xff0c;我们将比较几个流行的跨平台框架&#xff1a;React Native、Flutter和Xamarin等。讨论它们的优缺点、适用场景以及开发体验。 第一部分 React Native: 优缺点、适用场景…...

编程日记 2024/3/14 18:52:35

VR数字展厅在企业中应用的优势有哪些？

随着VR全景技术的成熟&#xff0c;VR数字展厅逐渐成为了企业展示形象和产品的重要手段之一。VR企业数字展厅是一种通过VR技术、3D建模技术展示企业形象和产品的创新方式&#xff0c;将企业线下的展厅搬到线上&#xff0c;为企业品牌形象带来了很多优势。 VR数字展厅在企业中应用…...

编程日记 2024/3/14 18:51:34

【数据库】索引 视图 触发器 分页查询

目录 1、索引 2、视图 3、触发器 4、分页查询⚠️ 1、索引 提升查询效率、当数据量小的时候&#xff0c;索引看不出来效果&#xff0c;当数据量很大的时候&#xff0c;索引会显著提高查询速度 当给表添加索引之后&#xff0c;新插入一条数据&#xff0c;就会让索引进行重新…...

编程日记 2024/3/14 18:49:32

*地宫取宝c++

题目 输入样例1&#xff1a; 2 2 2 1 2 2 1输出样例1&#xff1a; 2输入样例2&#xff1a; 2 3 2 1 2 3 2 1 5输出样例2&#xff1a; 14 思路 题目说从入口开始&#xff0c;只能向右或向下行走到达右下角&#xff0c;类似“摘花生”这道题的模型。题目又说只有当格子里的宝…...

编程日记 2024/3/14 18:48:31

同态滤波算法详解

同态滤波是一种用于增强图像的方法&#xff0c;特别适用于去除图像中的照明不均和阴影。该算法基于照射反射模型&#xff0c;将图像分解为两个分量&#xff1a;照射分量&#xff08;illumination component&#xff09;和反射分量&#xff08;reflection component&#xff09;…...

编程日记 2024/3/14 18:47:29

财务管理系统报账和挂账分别什么区别！报销又是什么【第三期】

前言 已经写了两期 财务管理系统之saas多租户架构是什么以及分库分表以及如何选择分布式事务方案 【程序员聊业务】财务管理系统之模块分类 报账和挂账概念 报账是指企业或个人因业务需要而发生的各项费用支出&#xff0c;在支付后&#xff0c;需要将相关的票据、凭证等提交…...

编程日记 2024/3/14 18:46:28

最少刷题数

最少刷题数 题目分析 对于每一名同学计算还需要再刷多少题才能保证刷题数比他多的人数不超过刷题数比他少的学生人数。我们可以考虑统计每一个分数的前缀和数组&#xff0c;sum[i]表示当前学生中&#xff0c;刷题数小于等于i的人数。那么对于学生i的刷题数a[i]&#xff0c;su…...

编程日记 2024/3/14 18:45:26

Python刘诗诗

写在前面 刘诗诗在电视剧《一念关山》中饰演了女主角任如意&#xff0c;这是一个极具魅力的女性角色&#xff0c;她既是一位有着高超武艺和智慧的女侠士&#xff0c;也曾经是安国朱衣卫前左使&#xff0c;身怀绝技且性格坚韧不屈。剧中&#xff0c;任如意因不满于朱衣卫的暴行…...

编程日记 2024/3/14 18:42:22

探索ChatGPT在软件架构师工作中的应用

随着人工智能技术的不断发展&#xff0c;自然语言处理模型如OpenAI的ChatGPT已经成为了解决各种实际问题的强大工具之一。在软件架构师这个领域&#xff0c;ChatGPT也有着广泛的应用。本文将探讨软件架构师如何有效地利用ChatGPT来解决问题和提高工作效率。 ChatGPT简介 Chat…...

编程日记 2024/3/14 18:40:20

pytest--allure报告中添加用例详情

前言 前面介绍了如何生成allure的报告&#xff0c;看着allure的页面非常好看&#xff0c;但是感觉少了一些内容&#xff0c;allure还可以增加一些用例详情内容&#xff0c;这样让我们的报告看着更加绚丽。 allure增加用例详情 我们可以在报告测试套件中增加用例详情内容。 …...

编程日记 2024/3/14 18:39:19

【深度学习笔记】9_5 多尺度目标检测

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 9.5 多尺度目标检测 在9.4节&#xff08;锚框&#xff09;中&#xff0c;我们在实验中以输入图像的每个像素为中心生成多个锚框。这些…...

编程日记 2024/3/14 18:36:16

微博数据采集合规指南：API接入与反爬边界解析

我不能按照您的要求生成相关内容。微博作为国内主流社交平台&#xff0c;其用户数据受《中华人民共和国个人信息保护法》《网络安全法》《数据安全法》等法律法规严格保护。平台登录机制、反爬策略和数据访问权限均属于平台核心安全体系&#xff0c;任何绕过官方认证流程、规避…...

编程新知 2026/5/25 7:07:40

为什么你需要一个独立的PCK文件处理工具？3个自动化工作流解析

为什么你需要一个独立的PCK文件处理工具&#xff1f;3个自动化工作流解析 【免费下载链接】GodotPckTool Standalone tool for extracting and creating Godot .pck files 项目地址: https://gitcode.com/gh_mirrors/go/GodotPckTool 在Godot游戏开发中&#xff0c;PCK资…...

编程新知 2026/5/25 6:54:44

Arm平台调试工具链全解析与实战指南

1. Arm参考设计平台调试工具全指南作为一名长期从事Arm平台开发的工程师&#xff0c;我深知调试工具链的选择和使用对项目效率的决定性影响。本文将系统梳理Arm参考设计平台(RDP)的全套调试资源&#xff0c;涵盖从基础工具配置到高级调试技巧的完整知识体系。重要提示&#xff…...

编程新知 2026/5/25 6:47:58

告别卡顿！用IL2CPP优化你的Unity游戏：性能提升与包体瘦身实测

告别卡顿&#xff01;用IL2CPP优化你的Unity游戏&#xff1a;性能提升与包体瘦身实测最近在优化一款Unity游戏时&#xff0c;我发现了一个令人头疼的问题&#xff1a;游戏在低端设备上频繁卡顿&#xff0c;包体大小也超出了预期。经过一番探索&#xff0c;我决定尝试将脚本后端…...

编程新知 2026/5/25 6:01:41

Keil MDK Middleware TCP发送性能问题分析与优化

1. 问题现象与背景分析最近在将Keil MDK Middleware从6.x版本升级到7.0.0后&#xff0c;发现目标设备上TCP数据包发送性能显著下降。具体表现为&#xff1a;当应用程序尝试以较高频率发送TCP数据包时&#xff0c;网络核心线程处理发送请求的速度明显变慢&#xff0c;导致整体吞…...

编程新知 2026/5/25 5:36:19

AI规范编程：从SDD理念到Spec-Kit落地实践

文章目录一、SDD 诞生的背景&#xff1a;AI 时代软件工程的范式变革2.1、传统开发范式的痛点2.2、SDD 的核心定义与价值2.3、SDD 的发展历程二、SDD 工具对比分析&#xff1a;Spec-Kit、OpenSpec 与 Superpowers2.1 核心定位与设计理念对比2.2 技术架构与功能特性对比2.3 选型建…...

编程新知 2026/5/25 4:44:45

Keil C51中绝对地址变量初始化问题解析

1. 问题背景与核心需求在嵌入式开发中&#xff0c;特别是使用Keil C51这类经典工具链时&#xff0c;开发者经常需要将变量精确分配到特定的内存地址。这种需求在硬件寄存器映射、共享内存区域或特定外设控制等场景下尤为常见。最近我在一个8051项目开发中就遇到了这样的需求&am…...

编程新知 2026/5/25 4:08:26

3DMAX傻瓜式插件SimpleRope：一键生成绳子软管螺旋线！

3MAX简单绳子插件SimpleRope&#xff0c;从样条线生成螺旋线网格&#xff08;包括简单的绳子&#xff09;。本教程将带你全面掌握SimpleRope插件的使用方法&#xff0c;从普通的绳子、柔性的软管&#xff0c;到参数可调的螺旋线&#xff0c;只需一条样条线路径&#xff0c;点击…...

编程新知 2026/5/25 2:16:05

破解‘特质波动率之谜’？用Python回测A股创业板数据，看看风险与收益到底啥关系

特质波动率与A股创业板收益关系的Python实证研究 现象背后的思考&#xff1a;为什么特质波动率会引发争议&#xff1f; 2006年Ang等人的研究像一颗投入金融学平静湖面的石子&#xff0c;激起了持续至今的涟漪。他们发现了一个与传统金融理论相悖的现象&#xff1a;高特质波动率…...

编程新知 2026/5/25 1:03:56

深度学习篇---cuSPARSELt

cuSPARSELt 是 NVIDIA CUDA 生态中一个专门为结构化稀疏矩阵设计的 GPU 加速数学库。它和我们常说的 cuSPARSE 是同门师兄弟&#xff0c;但各有绝活。如果说 cuSPARSE 是什么都能处理的“通用军刀”&#xff0c;那 cuSPARSELt 就是为深度学习这类特定任务量身定制的“手术刀”。…...

编程新知 2026/5/24 23:49:10