js手写日历插件

最新推荐文章于 2025-06-11 13:35:17 发布

原创最新推荐文章于 2025-06-11 13:35:17 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

基础专栏收录该内容

33 篇文章

订阅专栏

这个示例展示了如何使用JavaScript从头开始创建一个日历插件。代码中定义了一个`loadcalendar`函数来生成日历，根据当前日期计算月份天数，并在HTML表格中显示。还包含了增加和减少月份的功能，以及高亮显示当前日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{text-align: center;border-collapse:collapse;}
.active{color:deeppink;}
</style>
</head>
<body>

</body>
<script type="text/javascript">
//获取时间
var date = new Date();
var y = date.getFullYear();
var _m = date.getMonth();
var d = date.getDate();
var monthArr = [31,getFubuary(),31,30,31,30,31,31,30,31,30,31];

//console.log(y,_m,d,monthArr);

//生成日历
loadcalendar(document.body);

function loadcalendar(dom,month){
dom.innerHTML = '';
var tab = document.createElement("table");
tab.className = "calendar";
var date = new Date();
var y = date.getFullYear();
var m = month || _m;
//console.log(m);
var firstDay = new Date(y,m,1).getDay();
var numRow = Math.ceil((firstDay + monthArr[m]) / 7);
tab.setAttribute("border","1");
var calendarStr = "",dayID;
for(var i = 0;i < numRow;i++){
calendarStr += "<tr>";
for(var j = 0;j < 7;j++){
dayID = 7*i + j -firstDay + 1;
if(dayID <= 0 || dayID > monthArr[m]){dayID=''};
dayID == d && m == date.getMonth()?calendarStr += "<td class='active'>" + dayID + "</td>":calendarStr += "<td>" + dayID + "</td>";
};
calendarStr += "</tr>";
}
//console.log(calendarStr);
tab.innerHTML = "<caption><button id='reduce' style='float:left;border:0;background:0;'>-</button><button id='add' style='float:right;border:0;background:0;'>+</button>" + y + "年" + (parseInt(m) + parseInt(1)) + "月" + "</caption><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>" + calendarStr;
//将日历加入body中
dom.appendChild(tab);
};

//判断是否是闰年
function getFubuary(year){
if(year % 4){
return 28;
}else{
if(year % 100){
return 29
}else{
return 28;
}
}
}

//增加减少月份功能实现
document.body.addEventListener("click",function(e){
var e = e || window.event;
if(e.target.id == "reduce"){
//console.log(0)
if(_m > 0){
_m -= 1;
}
loadcalendar(document.body);
};
if(e.target.id == "add"){
//console.log(1)
if(_m < 11){
_m += 1;
}
loadcalendar(document.body);
}
});
</script>
</html>