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

AISchedule(3):基础生成表格

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>事件列表</title><!-- 加载样式表 --><style>/* 基础样式 */body {background: linear-gradient(to bottom, #f2f2f2, #e0e0e0);font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}/* 表格样式 */table {border-collapse: collapse;border: 1px solid #ddd;border-radius: 5px;box-shadow: 0px 0px 10px rgba(0,0,0,0.1);margin: 50px auto;width: 80%;}th {background-color: #f5f5f5;color: #333;font-weight: bold;padding: 10px 20px;text-align: center;text-shadow: 1px 1px 0px rgba(255,255,255,0.5);}td {background-color: #fff;color: #333;padding: 10px 20px;text-align: center;vertical-align: middle;}/* 输入框样式 */input[type="text"], input[type="button"], input[type="submit"] {border: 1px solid #ccc;border-radius: 5px;font-size: 16px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding: 10px;width: 100%;}input[type="text"]:focus, input[type="button"]:hover, input[type="submit"]:hover {border-color: #333;outline: none;}/* 按钮样式 */.btn-row {display: flex;justify-content: center;align-items: center;margin-bottom: 20px;}.btn-container {display: flex;justify-content: center;margin-top: 30px;}.btn {background-color: #4CAF50;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;font-size: 16px;margin: 0 10px;border-radius: 5px;width: 120px;height: 40px;cursor: pointer;transition: background-color 0.3s ease-out, color 0.3s ease-out;}.btn-add {background-color: #00a600;padding-left: 20px;padding-right: 20px;}.btn-remove {background-color: #EA3526;padding-left: 20px;padding-right: 20px;}.btn-submit {background-color: #009BFF;width: 80px;margin-left: 5px;padding-left: 5px;padding-right: 5px;}.btn:hover {background-color: rgba(76, 175, 80, 1);color: #fff;opacity: 0.7;}.btn-add:hover {background-color: rgba(0, 166, 0, 0.7);}.btn-remove:hover {background-color: rgba(234, 53, 38, 0.7);}.btn-submit:hover {background-color: rgba(0, 155, 255, 0.7);}/* 标题样式 */h1 {color: #333;text-align: center;margin-top: 50px;margin-bottom: 30px;font-size: 4em;text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);letter-spacing: 2px;}/* 描述样式 */p {color: #555;font-size: 1.2em;font-weight: bold;text-align: center;margin-bottom: 50px;}/* 响应式布局 */@media(max-width: 768px) {table {font-size: 14px;width: 95%;}input[type="text"], input[type="button"], input[type="submit"] {font-size: 14px;padding: 8px;}h1 {font-size: 3em;}p {font-size: 1em;}.schedule-table {border-collapse: collapse;width: 100%;margin-top: 20px;}.schedule-table th {background-color: #4CAF50;color: white;font-size: 14px;font-weight: normal;padding: 8px;text-align: center;}.schedule-table td {border: 1px solid #ddd;font-size: 14px;padding: 8px;text-align: center;}.break-row {background-color: #f5f5f5;font-size: 14px;font-weight: bold;}/* 弹窗样式 */.schedule-window {width: 90%;margin: 50px auto;}.schedule-header {font-size: 24px;font-weight: bold;text-align: center;margin-bottom: 20px;}.schedule-wrapper {overflow-x: auto;}.schedule-close {position: absolute;top: 10px;right: 10px;font-size: 20px;cursor: pointer;}}/* 调整按钮布局 */.btn-container {display: flex;justify-content: center;margin-top: 30px;}.btn {margin: 0 10px;}.schedule-table {border-collapse: collapse;width: 100%;margin-top: 20px;}.schedule-table th {background-color: #4CAF50;color: white;font-size: 14px;font-weight: normal;padding: 8px;text-align: center;}.schedule-table td {border: 1px solid #ddd;font-size: 14px;padding: 8px;text-align: center;}.break-row {background-color: #f5f5f5;font-size: 14px;font-weight: bold;}</style>
</head><body><h1>AISchedule</h1><p>一个事件列表工具,帮助你更好地分配、管理时间。</p><!-- 创建表单 --><form onsubmit="event.preventDefault(); showSchedule();"><!-- 创建事件列表 --><table id="myTable"><thead><tr><th>时长(分钟)</th><th>事件名称</th></tr></thead><tbody><!-- 创建第一行 --><tr><td><input type="text" name="time[]"/></td><td><input type="text" name="task[]"/></td></tr></tbody></table><!-- 创建按钮组 --><div class="btn-container"><!-- 创建添加事件按钮 --><button class="btn btn-add" type="button" onclick="addRow()">+事件</button><!-- 创建删除事件按钮 --><button class="btn btn-remove" type="button" onclick="deleteRow()">-事件</button><!-- 创建提交按钮 --><input class="btn btn-submit" type="submit" value="提交"/></div></form><!-- 创建脚本 --><script>// 添加行function addRow() {var table = document.getElementById("myTable");var row = table.insertRow(-1);var cell1 = row.insertCell(0);var cell2 = row.insertCell(1);cell1.innerHTML = '<input type="text" name="time[]"/>';cell2.innerHTML = '<input type="text" name="task[]"/>';}// 删除行function deleteRow() {var table = document.getElementById("myTable");if(table.rows.length > 2) {table.deleteRow(-1);}}// 验证表单function validateForm() {var table = document.getElementById("myTable");for(var i = 1; i < table.rows.length; i++) {var timeInput = table.rows[i].cells[0].querySelector("input[type='text']");var taskInput = table.rows[i].cells[1].querySelector("input[type='text']");var timeValue = timeInput.value.trim();var taskValue = taskInput.value.trim();if(timeValue === "" && taskValue === "") {alert("请点击'删事件'以删除空事件,方便我进行时间分配。")taskInput.focus();return false;}if(timeValue === "" || isNaN(timeValue) || timeValue <= 0) {alert("请输入有效的时长,以方便我知道你要花的时间。");timeInput.focus();return false;}if(taskValue === "") {alert("请输入事件名称,以方便我为你智能提醒。");taskInput.focus();return false;}}return true;}// 展示时间表格function showSchedule() {if (validateForm()) {var table = document.getElementById("myTable");var startTime = new Date(Date.parse("2021-01-01 08:00:00"));var totalMinutes = 0;var html = '<table class="schedule-table"><thead><tr><th>开始时间</th><th>结束时间</th><th>时长</th><th>事件名称</th></tr></thead><tbody>';for(var i = 1; i < table.rows.length; i++) {var timeInput = table.rows[i].cells[0].querySelector("input[type='text']");var taskInput = table.rows[i].cells[1].querySelector("input[type='text']");var timeValue = parseInt(timeInput.value.trim());var taskValue = taskInput.value.trim();totalMinutes += timeValue;var endTime = new Date(startTime.getTime() + timeValue * 60 * 1000);var startTimestamp = getTimeString(startTime);var endTimestamp = getTimeString(endTime);var duration = getTimeDuration(startTime, endTime);html += '<tr><td>' + startTimestamp + '</td><td>' + endTimestamp + '</td><td>' + duration + '</td><td>' + taskValue + '</td></tr>';if (i % 2 === 0) {// 插入5分钟休息var breakTime = 5;totalMinutes += breakTime;var breakEndTime = new Date(endTime.getTime() + breakTime * 60 * 1000);html += '<tr class="break-row"><td colspan="4">休息5分钟</td></tr>';endTime = breakEndTime;}startTime = endTime;}html += '</tbody></table>';// 打开展示窗口openScheduleWindow(html);}}// 获取时间字符串,格式为hh:mm:ssfunction getTimeString(date) {var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();return formatNumber(hour) + ':' + formatNumber(minute) + ':' + formatNumber(second);}// 获取时间差,格式为hh:mm:ssfunction getTimeDuration(startTime, endTime) {var duration = Math.abs(endTime - startTime) / 1000;var hours = Math.floor(duration / 3600) % 24;var minutes = Math.floor(duration / 60) % 60;var seconds = Math.floor(duration % 60);return formatNumber(hours) + ':' + formatNumber(minutes) + ':' + formatNumber(seconds);}// 打开展示窗口function openScheduleWindow(html) {var windowHtml = '<div class="schedule-window"><div class="schedule-close" οnclick="closeScheduleWindow()">&times;</div><div class="schedule-header"><p>时间表格<br>(点击左上角的叉关闭)</p></div><div class="schedule-wrapper">' + html + '</div></div>';document.body.innerHTML += windowHtml;}// 关闭展示窗口function closeScheduleWindow() {var scheduleWindow = document.querySelector('.schedule-window');scheduleWindow.parentNode.removeChild(scheduleWindow);}// 格式化数字,不足两位前面补0function formatNumber(num) {return num < 10 ? '0' + num : num;}</script>
</body>
</html>

相关文章:

AISchedule(3):基础生成表格

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>事件列表</title><!-- 加载样式表 --><style>/* 基础样式 */body {background: linear-gradient(to bottom, #f2f2f2, #e0e0e0);font-family: Helvetica…...

OpenAI 上线新功能力捧 RAG,开发者真的不需要向量数据库了?

近期&#xff0c; OpenAI 的开发者大会迅速成为各大媒体及开发者的热议焦点&#xff0c;有人甚至发出疑问“向量数据库是不是失宠了&#xff1f;” 这并非空穴来风。的确&#xff0c;OpenAI 在现场频频放出大招&#xff0c;宣布推出 GPT-4 Turbo 模型、全新 Assistants API 和一…...

PyCharm鼠标控制字体缩放

File->Settings->Keymap 右边搜索栏输入increase(放大)&#xff0c;可以看到下面出现increase Font Size(放大字体尺寸)&#xff0c;双击。 双击后出现几个选项&#xff0c;选择Add Mouse Shortcut,会出现一个页面给录入动作。 按住Ctrl同时鼠标向上滚动&#xff0c;该动…...

NI USRP RIO软件无线电

NI USRP RIO软件无线电 NI USRP RIO是SDR游戏规则的改变者&#xff0c;它为无线通信设计人员提供了经济实惠的SDR和前所不高的性能&#xff0c;可帮助开发下一代5G无线通信系统。“USRP RIO”是一个术语&#xff0c;用于描述包含FPGA的USRP软件定义无线电设备&#xff0c;例如…...

kicad源代码研究:symbol properties窗口中为SCH_SYMBOL添加或删除一个sch_field

向grid中添加一个sch_field FIELDS_GRID_TABLE<SCH_FIELD>* m_fields; WX_GRID* m_fieldsGrid; simEnableFieldRow (int) m_fields->size(); m_fields->emplace_back( VECTOR2I( 0, 0 ), simEnableFieldRow, m_symbol, SIM_ENABLE_FIELD ); // notify the grid w…...

httpClient超时时间详解与测试案例

使用httpclient作为http请求的客户端时&#xff0c;我们一般都会设置超时时间&#xff0c;这样就可以避免因为接口长时间无响应或者建立连接耗时比较久导致自己的系统崩溃。通常它里面设置的几个超时时间如下&#xff1a; RequestConfig config RequestConfig.custom().setCo…...

后端接口性能优化分析-数据库优化

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…...

都很忙,哪里寻找时间?

最近忙不&#xff1f; 多久未联系的朋友发来信息。 我感觉就是一坑。 说忙吧&#xff0c;显得自己很重要&#xff0c;可说不忙吧&#xff0c;又显得没价值。 有事说事&#xff0c;不要上来就说“在不&#xff1f;忙不&#xff1f;有时间不&#xff1f;空不&#xff1f;”等…...

【经验记录】Ubuntu系统安装xxxxx.tar.gz报错ImportError: No module named setuptools

最近在Anaconda环境下需要离线状态&#xff08;不能联网的情况&#xff09;下安装一个xxxxx.tar.gz格式的包&#xff0c;将对应格式的包解压后&#xff0c;按照如下命令进行安装 sudo python setup.py build # 编译 sudo python setup.py install # 安装总是报错如下信息&am…...

SDL2 消息循环和事件响应

1.简介 SDL事件可以是用户输入、系统通知或窗口管理事件等。SDL事件可以通过SDL_PollEvent和SDL_WaitEvent函数来获取。在SDL中&#xff0c;事件是通过SDL_Event结构体表示的&#xff0c;其中包含事件类型以及与该类型相关的具体数据。 下面是一些常见的SDL事件类型和相关的事…...

技巧篇:Mac 环境PyCharm 配置 python Anaconda

Mac 中 PyCharm 配置 python Anaconda环境 在 python 开发中我们最常用的IDE就是PyCharm&#xff0c;有关PyCharm的优点这里就不在赘述。在项目开发中我们经常用到许多第三方库&#xff0c;用的最多的命令就是pip install 第三方库名 进行安装。现在你可以使用一个工具来帮你解…...

matplotlib绘图

介绍 在官网上有更多种类的图型的绘制方法 matpoltlib中文官方文档&#xff1a;例子_Matplotlib 中文网 matpoltlib英文官方文档&#xff1a;Examples — Matplotlib 3.8.1 documentation 分类 一、折线图 1、要实现的功能&#xff1a; 2、实例&#xff1a; # 导入包 from…...

QT使用Socket与安卓Socket互发消息

背景:安卓设备通过usb网络共享给Linux,此时安卓设备与linux处于同一网络环境,符合使用socket的条件,linux做客户端,安卓做服务端 1.QT使用Socket (1).在工程文件中加入 QT network (2).导包以及写一些槽函数用做数据传输与状态接收 #ifndef MAINWINDOW_H #define MAINWINDOW…...

Redis05-集群方案

目录 Redis集群方案 主从复制 主从复制的基本原理 主从复制的工作流程 乐观复制 主从复制的优势 哨兵机制 哨兵的关键作用 服务状态监控 哨兵选举Master规则 分片集群 分片集群中的数据读写 数据写入 数据读取 一致性哈希和客户端分片 Redis集群方案 微服务时代…...

故障演练的关键要素及重要性

故障演练是一种有计划的、模拟真实生产环境故障的活动。通过故意引入故障、模拟系统组件失效或模拟其他异常条件&#xff0c;团队可以观察并评估系统在这些情况下的反应。这有助于发现潜在的问题、改进应急响应和提高系统整体的可用性。 一、故障演练的关键要素 计划性&#xf…...

11月15日,每日信息差

今天是2023年11月15日&#xff0c;以下是为您准备的12条信息差 第一、去哪儿正式启动鸿蒙原生应用开发 第二、最高支持千亿向量规模&#xff0c;腾讯云向量数据库全面升级&#xff0c;同时和信通院一起联合50多家企业共同发布了国内首个向量数据库标准&#xff0c;推进向量数…...

java-关于alibaba的JSON.parseArray注意事项

String resultStr dataStrJosnObject.get("result").toString();JSONArray resultArray JSON.parseArray(resultStr);resultStr 格式是[{},{},{}] resultArray 的size是3 获取第一个{}字符串&#xff0c;使用resultArray.get(0) 获取第二哥个{}字符串&#xff0c;使…...

软文推广中媒体矩阵的优势在哪儿

咱们日常生活中是不是经常听到一句俗语&#xff0c;不要把鸡蛋放在同一个篮子里&#xff0c;其实在广告界这句话也同样适用&#xff0c;媒介矩阵是指企业在策划广告活动时&#xff0c;有目的、有计划的利用多种媒体进行广告传播&#xff0c;触达目标用户。今天媒介盒子就来和大…...

xss总结

xss注入总结 漏洞描述 XSS&#xff08;跨站脚本攻击&#xff09;是一种常见的网络安全漏洞&#xff0c;攻击者利用该漏洞在网页中插入恶意脚本&#xff0c;以获取用户的敏感信息或执行恶意操作。 XSS中文叫做跨站脚本攻击&#xff08;Cross-site scripting&#xff09;&…...

【MySQL学习】常见命令

数据库操作 &#xff08;1&#xff09;查询所有数据库名字 show databases;&#xff08;2&#xff09;常见数据库 create database db_name; //create if exist create database if exists databaseName;&#xff08;3&#xff09;删除数据库 drop database db_name;表格操…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...