静态网页：日历
静态网页：日历
川川菜鸟
发布于 2021-10-18 17:23:24
发布于 2021-10-18 17:23:24
代码可运行
运行总次数：0
代码可运行
效果：
群：970353786
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#app{
width: 600px;
border: 1px solid black;
margin: 100px auto;
}
#titleBox{
width: 100%;
height: 60px;
line-height: 60px;
background-color: skyblue;
}
#leftspan{
float: left;
font-size: 30px;
cursor: pointer;
}
#rightspan{
float: right;
font-size: 30px;
cursor: pointer;
}
#title{
text-align: center;
font-size: 40px;
}
table{
width: 100%;
border: 1px solid darkgray;
}
tr{
height: 30px;
}
td,th{
text-align: center;
border: 1px solid #666;
}
</style>
</head>
<body>
<div id="app">
<div id="titleBox">
<span id="leftspan">上一个月</span>
<span id="rightspan">下一个月</span>
<div id="title">XXXX年XX月</div>
</div>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="color: red;">周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
var leftspan = document.getElementById("leftspan");
var rightspan = document.getElementById("rightspan");
var titleDiv = document.getElementById("title")
var mydate = new Date();
console.log(mydate);
showDate();
function showDate(){
var year = mydate.getFullYear();//2021
var month = mydate.getMonth();//用0~11表示1~12
titleDiv.innerText = year + "年" + (month+1) + "月";
//确定每个月的日历
//先确定每个月的1号是星期几
mydate = new Date(year,month,1);
var week = mydate.getDay();
console.log(week);//用0~6表示周日、周一到周六
//再确定每个月有多少天
mydate = new Date(year,month+1,0);//0号日期
console.log(mydate);
var days = mydate.getDate();
console.log(days);
//把日期填写到相应的td中
//获取所有的td
var tds = document.querySelectorAll("tbody td");
console.log(tds);
// tds[week+0].innerText = 1;
// tds[week+1].innerText = 1+1;
// tds[week+2].innerText = 1+2;
// tds[week+3].innerText = 1+3; //.....=== days结束
//先清除td中所有内容
for (var i = 0;i < tds.length; i++) {
tds[i].innerText = "";
}
//再填写日期
for (var i = 1;i <= days; i++) {
tds[week+(i-1)].innerText = i;
}
//处理空行
if (tds[28].innerText == "") {//两行为空
tds[28].parentNode.style.display = "none"
tds[35].parentNode.style.display = "none"
}
else if (tds[35].innerText == "") {//一行为空
tds[35].parentNode.style.display = "none"
}
else{//显示两行
tds[28].parentNode.style.display = "table-row"
tds[35].parentNode.style.display = "table-row"
}
}
//上一个月
leftspan.onclick = function(){
// console.log(1);
var year = mydate.getFullYear();//2021
var month = mydate.getMonth();//用0~11表示1~12
month--;
mydate = new Date(year,month);
showDate();
}
//下一个月
rightspan.onclick = function(){
console.log(2);
var year = mydate.getFullYear();//2021
var month = mydate.getMonth();//用0~11表示1~12
month++;
mydate = new Date(year,month);
showDate();
}
</script>
</html>
<!--
增加功能：
1、添加上一年和下一年功能
2、在空的td中填写上一个月的最后几天和下一个月的最初几天，灰色显示。
-->本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/08/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
