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>AIScheduleh1>
<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 = '';
cell2.innerHTML = '';
}
// 删除行
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 = '开始时间 结束时间 时长 事件名称 ' + startTimestamp + ' ' + endTimestamp + ' ' + duration + ' ' + taskValue + ' 休息5分钟
';
// 打开展示窗口
openScheduleWindow(html);
}
}
// 获取时间字符串，格式为hh:mm:ss
function getTimeString(date) {
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return formatNumber(hour) + ':' + formatNumber(minute) + ':' + formatNumber(second);
}
// 获取时间差，格式为hh:mm:ss
function 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 = '×时间表格
（点击左上角的叉关闭）
' + html + '';
document.body.innerHTML += windowHtml;
}
// 关闭展示窗口
function closeScheduleWindow() {
var scheduleWindow = document.querySelector('.schedule-window');
scheduleWindow.parentNode.removeChild(scheduleWindow);
}
// 格式化数字，不足两位前面补0
function formatNumber(num) {
return num < 10 ? '0' + num : num;
}
script>
body>
html>