实现的一个网页版的简易表白墙
实现的一个网页版的表白墙
实现效果
代码截图
相关代码
<!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…...
随身WiFi靠谱吗？ 看完这篇文章你就懂了？2024随身wifi靠谱品牌推荐
在网络如此发达，随身WiFi如此普遍的2024年，仍有人在质疑随身WiFi到底靠不靠谱，有没有用处。其实只需要回答两个问题： 1、你的流量够用吗？手机的流量包和随身WiFi套餐哪个更便宜？ 2、手机流量不够用&#x…...
mysql的trace追踪SQL工具，进行sql优化
trace是MySQL5.6版本后提供的SQL跟踪工具，通过使用trace可以让我们明白optimizer（优化器）如何选择执行计划。 注意：开启trace工具会影响mysql性能，所以只适合临时分析sql使用，用完之后请立即关闭。 测试数…...
docker部署springboot jar包项目
docker部署springboot jar包项目 前提，服务器环境是docker环境，如果服务器没有安装docker，可以先安装docker环境。 各个环境安装docker： Ubuntu上安装Docker： ubuntu离线安装docker: CentOS7离线安装Docker࿱…...
一个八年工作经验老程序员的分享
作为一个 Java 程序员，我在这个行业中工作了多年。在这个过程中，我经历了许多挑战和机遇，也学到了很多宝贵的经验和教训。在这篇文章中，我想分享一些我的感想和思考，希望能够对其他 Java 程序员有所帮助。 一、技术的…...
代码随想录算法训练营第四十三天|动态规划|1049. 最后一块石头的重量 II、494. 目标和、474.一和零
1049. 最后一块石头的重量 II 文章 有一堆石头，每块石头的重量都是正整数。 每一回合，从中选出任意两块石头，然后将它们一起粉碎。假设石头的重量分别为 x 和 y，且 x < y。那么粉碎的可能结果如下： 如果 x y&a…...
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…...
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…...
Websocket在Asp.net webApi（.net framework）上的应用
之前在写看板部分的web api的时候，都是通过Ajax在规定时间内轮询调用web api，这样简单省事，但是当看板多了（并发量上来）以后，比较消耗服务器的性能，所以最近研究了websocket，希望使用…...
App前端开发跨平台框架比较：React Native、Flutter、Xamarin等
引言 移动应用开发领域的跨平台框架正在不断演进，为开发者提供更多选择。在本文中，我们将比较几个流行的跨平台框架：React Native、Flutter和Xamarin等。讨论它们的优缺点、适用场景以及开发体验。 第一部分 React Native: 优缺点、适用场景…...
VR数字展厅在企业中应用的优势有哪些？
随着VR全景技术的成熟，VR数字展厅逐渐成为了企业展示形象和产品的重要手段之一。VR企业数字展厅是一种通过VR技术、3D建模技术展示企业形象和产品的创新方式，将企业线下的展厅搬到线上，为企业品牌形象带来了很多优势。 VR数字展厅在企业中应用…...
【数据库】索引 视图 触发器 分页查询
目录 1、索引 2、视图 3、触发器 4、分页查询⚠️ 1、索引 提升查询效率、当数据量小的时候，索引看不出来效果，当数据量很大的时候，索引会显著提高查询速度 当给表添加索引之后，新插入一条数据，就会让索引进行重新…...
*地宫取宝c++
题目 输入样例1： 2 2 2 1 2 2 1输出样例1： 2输入样例2： 2 3 2 1 2 3 2 1 5输出样例2： 14 思路 题目说从入口开始，只能向右或向下行走到达右下角，类似“摘花生”这道题的模型。题目又说只有当格子里的宝…...
同态滤波算法详解
同态滤波是一种用于增强图像的方法，特别适用于去除图像中的照明不均和阴影。该算法基于照射反射模型，将图像分解为两个分量：照射分量（illumination component）和反射分量（reflection component）…...
财务管理系统报账和挂账分别什么区别！报销又是什么【第三期】
前言 已经写了两期 财务管理系统之saas多租户架构是什么以及分库分表以及如何选择分布式事务方案 【程序员聊业务】财务管理系统之模块分类 报账和挂账概念 报账是指企业或个人因业务需要而发生的各项费用支出，在支付后，需要将相关的票据、凭证等提交…...
最少刷题数
最少刷题数 题目分析 对于每一名同学计算还需要再刷多少题才能保证刷题数比他多的人数不超过刷题数比他少的学生人数。我们可以考虑统计每一个分数的前缀和数组，sum[i]表示当前学生中，刷题数小于等于i的人数。那么对于学生i的刷题数a[i]，su…...
Python刘诗诗
写在前面 刘诗诗在电视剧《一念关山》中饰演了女主角任如意，这是一个极具魅力的女性角色，她既是一位有着高超武艺和智慧的女侠士，也曾经是安国朱衣卫前左使，身怀绝技且性格坚韧不屈。剧中，任如意因不满于朱衣卫的暴行…...
探索ChatGPT在软件架构师工作中的应用
随着人工智能技术的不断发展，自然语言处理模型如OpenAI的ChatGPT已经成为了解决各种实际问题的强大工具之一。在软件架构师这个领域，ChatGPT也有着广泛的应用。本文将探讨软件架构师如何有效地利用ChatGPT来解决问题和提高工作效率。 ChatGPT简介 Chat…...
pytest--allure报告中添加用例详情
前言 前面介绍了如何生成allure的报告，看着allure的页面非常好看，但是感觉少了一些内容，allure还可以增加一些用例详情内容，这样让我们的报告看着更加绚丽。 allure增加用例详情 我们可以在报告测试套件中增加用例详情内容。 …...
【深度学习笔记】9_5 多尺度目标检测
注：本文为《动手学深度学习》开源内容，部分标注了个人理解，仅为个人学习记录，无抄袭搬运意图 9.5 多尺度目标检测 在9.4节（锚框）中，我们在实验中以输入图像的每个像素为中心生成多个锚框。这些…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
c# 局部函数 定义、功能与示例
C# 局部函数：定义、功能与示例 1. 定义与功能 局部函数（Local Function）是嵌套在另一个方法内部的私有方法，仅在包含它的方法内可见。 • 作用：封装仅用于当前方法的逻辑，避免污染类作用域，提升…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日，在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上，可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞，强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统
Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...
Unity VR/MR开发-VR开发与传统3D开发的差异
视频讲解链接：【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...
Vue 3 + WebSocket 实战：公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战：公司通知实时推送功能详解 📌 收藏 点赞 关注，项目中要用到推送功能时就不怕找不到了！ 实时通知是企业系统中常见的功能，比如：管理员发布通知后，所有用户…...
2025年- H71-Lc179--39.组合总和(回溯,组合）--Java版
1.题目描述 2.思路 当前的元素可以重复使用。 （1）确定回溯算法函数的参数和返回值（一般是void类型） （2）因为是用递归实现的，所以我们要确定终止条件 （3）单层搜索逻辑 二…...
字符串哈希+KMP
P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...
ZYNQ学习记录FPGA(二)Verilog语言
一、Verilog简介 1.1 HDL（Hardware Description language） 在解释HDL之前，先来了解一下数字系统设计的流程：逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端，在这个过程中就需要用到HDL，正文…...