更新 test.html
parent
ae52b1869c
commit
58e96145a3
|
|
@ -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,36 +60,38 @@
|
||||||
</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>
|
||||||
<th>日</th>
|
<th>日</th>
|
||||||
<th>一</th>
|
<th>一</th>
|
||||||
<th>二</th>
|
<th>二</th>
|
||||||
<th>三</th>
|
<th>三</th>
|
||||||
<th>四</th>
|
<th>四</th>
|
||||||
<th>五</th>
|
<th>五</th>
|
||||||
<th>六</th>
|
<th>六</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<!-- 日历的主体部分 -->
|
<!-- 日历的主体部分 -->
|
||||||
<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>
|
||||||
layui.use(['layer'], function () {
|
layui.use(['layer'], function () {
|
||||||
|
|
|
||||||
Reference in New Issue