使用HTML和JS 创建一个动态日历表
先看效果图
Html + JS 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/Canlendar.css"/>
<title>动态显示日历</title>
</head>
<body>
<table>
<td style="width:9%" onclick="ShowCalendar(\''20210401'\')">
<table style="background-color: #408080;color:#FFFFFF;">
<tr>
<td id="showCalendar" onclick="clickCanlendar()">点击显示</td>
</tr>
</table>
</td>
</table>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
function clickCanlendar(){
var date = new Date();
var month = date.getMonth();
var day = date.getDate();
if(month >= 1 && month <= 9){
month = '0' + month
}
if(day >= 1 && day <= 9){
day = '0' + day;
};
var currentDate = date.getFullYear() + month + day;
alert(date);
ShowCalendar(currentDate);
}
function ShowCalendar(SY_OPERATION){
//判断exit 节点是否存在
if($("#exit").length > 0){
console.log(1);
$("#exit").detach();
return;
}else{
console.log(2);
var Calendar = '<div id= "exit" class="main clearfix" style="position: absolute;background:white;">' +
'<div class="menu clearfix tomove"> '+
' <a class="select-prev fl" href="javascript:;"><</a>' +
' <div class="select month fl pr">' +
'<div class="select-text"><span class="year-text" value="2016">2016年</span><span class="month-text" value="">1月</span></div>' +
' </div>' +
'<a class="select-next fl" href="javascript:;">></a>' +
'<a class="select-today fl" href="javascript:;">返回今天</a>' +
'<div class="time fl">10:40:05</div>' +
'</div>' +
'<ul class="title">' +
' <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>' +
'</ul>' +
'<ul class="table">' +
' <li><span>1</span></li><li><span>2</span>' +
' </ul>' +
'</div>';
$(Calendar).insertBefore("#showCalendar");
console.log(3);
$(function(){
var init =