更新 test.html

master
wangsiyuan 2023-12-27 11:33:43 +08:00
parent ae52b1869c
commit 58e96145a3
1 changed files with 31 additions and 26 deletions

View File

@ -29,11 +29,13 @@
color: #fff; /* 白色文字 */ color: #fff; /* 白色文字 */
background-color: green; /* 已签到日期的背景色 */ background-color: green; /* 已签到日期的背景色 */
} }
#current-time { #current-time {
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
text-align: center; text-align: center;
} }
.reminder { .reminder {
margin-top: 20px; margin-top: 20px;
font-size: 16px; font-size: 16px;
@ -43,6 +45,7 @@
.calendar-table th { .calendar-table th {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.color-box { .color-box {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
@ -57,12 +60,13 @@
</style> </style>
</head> </head>
<body> <body>
<!-- 动态显示当前时间的标题 --> <div>
<h1 id="current-time">当前时间: </h1> <!-- 动态显示当前时间的标题 -->
<h1 id="current-time">当前时间: </h1>
<h2>签到提醒</h2> <h2>签到提醒</h2>
<table class="layui-table calendar-table" id="calendar"> <table class="layui-table calendar-table" id="calendar">
<!-- 日历的头部 --> <!-- 日历的头部 -->
<thead> <thead>
<tr> <tr>
@ -79,13 +83,14 @@
<tbody id="calendar-body"> <tbody id="calendar-body">
<!-- 动态生成日历的日期部分 --> <!-- 动态生成日历的日期部分 -->
</tbody> </tbody>
</table> </table>
<!-- 提醒内容 --> <!-- 提醒内容 -->
<div class="reminder"> <div class="reminder">
<span><span class="color-box" style="background-color: green;"></span>绿色代表当月已签到</span><br> <span><span class="color-box" style="background-color: green;"></span>绿色代表当月已签到</span><br>
<span><span class="color-box" style="background-color: #FFA07A;"></span>颜色代表本月需要签到</span> <span><span class="color-box" style="background-color: #FFA07A;"></span>颜色代表本月需要签到</span>
</div>
</div> </div>
</div>
<script src="//unpkg.com/layui@2.9.2/dist/layui.js"></script> <script src="//unpkg.com/layui@2.9.2/dist/layui.js"></script>
<script> <script>