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

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

news 2026/4/3 9:17:53

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

实现效果

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

3大核心优势+4类场景方案：Lenovo Legion Toolkit让游戏本性能释放提升30%

3大核心优势4类场景方案&#xff1a;Lenovo Legion Toolkit让游戏本性能释放提升30% 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionToolk…...

编程新知 2026/4/3 8:31:14

AI绘画新体验：图图的嗨丝造相快速上手，轻松生成时尚渔网袜风格图片

AI绘画新体验&#xff1a;图图的嗨丝造相快速上手&#xff0c;轻松生成时尚渔网袜风格图片 1. 认识图图的嗨丝造相-Z-Image-Turbo 1.1 什么是嗨丝造相模型 图图的嗨丝造相-Z-Image-Turbo是一款专注于生成时尚渔网袜风格图片的AI绘画模型。它基于先进的图像生成技术&#xff…...

编程新知 2026/4/3 7:32:35

COMSOL 6.1版本皮秒多脉冲激光烧蚀模型：双温变形几何烧蚀模拟系统——电子晶格温度清晰解...

COMSOL 6.1版本 皮秒多脉冲激光烧蚀模型 模型内容&#xff1a;涉及双温模型&#xff0c;变形几何&#xff0c;烧蚀&#xff0c;皮秒脉冲热源&#xff0c;电子、晶格温度 优势&#xff1a;模型注释清晰明了&#xff0c;各个情况都有涉及可参考性极强&#xff0c;可以修改&#x…...

编程新知 2026/4/3 7:28:32

OpenClaw+Phi-3-vision智能相册：私人照片自动分类与摘要

OpenClawPhi-3-vision智能相册&#xff1a;私人照片自动分类与摘要 1. 为什么需要本地化的智能相册管理 去年夏天&#xff0c;我带着家人去海边度假&#xff0c;用手机拍了近千张照片。回来后面对杂乱的相册&#xff0c;花了整整两个周末才完成分类整理——这种痛苦经历让我开…...

编程新知 2026/4/3 7:00:00

Git【企业级开发模型】

一、为什么需要企业级开发模型&#xff1f; 一个软件从零开始到最终交付&#xff0c;大致需要经历&#xff1a;规划 → 编码 → 构建 → 测试 → 发布 → 部署 → 维护。在个人项目中&#xff0c;你一个人可以完成所有环节。但在企业中&#xff0c;角色分工明确&#xff1a; 开…...

编程新知 2026/4/3 6:45:51

终极指南：Redoc安全最佳实践，全面保护你的API文档

终极指南&#xff1a;Redoc安全最佳实践&#xff0c;全面保护你的API文档 【免费下载链接】redoc &#x1f4d8; OpenAPI/Swagger-generated API Reference Documentation 项目地址: https://gitcode.com/gh_mirrors/re/redoc Redoc是一款强大的OpenAPI/Swagger生成API参…...

编程新知 2026/4/3 4:03:17

ThinkLink+EdgeBus 将建大仁科的氧传感器接入到LoRaWAN系统

传统 RS485 传感器&#xff0c;也能快速接入 LoRaWAN 系统很多项目现场&#xff0c;其实已经部署了不少成熟可用的传感器。 问题往往不在于“传感器能不能测”&#xff0c;而在于&#xff1a;怎样把这些传统传感器&#xff0c;快速接入 LoRaWAN 和上层业务系统&#xff1f;以 R…...

编程新知 2026/4/3 2:01:22

Docker环境下SEEDLab BGP实验全流程避坑指南（附DNS/HTTP超时解决方案）

Docker环境下SEEDLab BGP实验深度实战手册 在网络安全教学领域&#xff0c;SEEDLab系列实验因其高度仿真的网络环境和精心设计的攻防场景&#xff0c;成为培养实战能力的重要工具。当这些实验与Docker容器技术结合时&#xff0c;既能复现复杂网络拓扑&#xff0c;又带来了环境配…...

编程新知 2026/4/3 1:38:53

AGV如何实现自主避障

下面按“传感器→建模→算法→安全机制→工程实现”的顺序&#xff0c;把AGV自主避障讲清楚。 一、整体架构概览 AGV要“自己绕开障碍”&#xff0c;至少要做三件事&#xff1a; 1&#xff09;感知&#xff1a;知道“我在哪”“周围有什么”&#xff1b; 2&#xff09;规划&…...

编程新知 2026/4/3 1:30:46

Arduino I²C pH传感器库：高鲁棒性嵌入式pH测量方案

1. 项目概述 iarduino_I2C_pH 是一款专为 iArduino 系列 IC 接口 pH 传感器模块设计的 Arduino 兼容 C 库。该库面向嵌入式硬件工程师与固件开发者&#xff0c;提供对 pH-метр&#xff08;pH 计&#xff09;模块的完整底层控制能力&#xff0c;支持标准硬件 IC 外设&#…...

编程新知 2026/4/3 0:30:25