试图创建一个日历,记录天数并将其添加到表中的tr中。我已经创建了我所有的var,但我很难处理循环和日历的开始和结束。请帮帮我,我是新手。
"use strict";
var $ = function (id) { return document.getElementById(id); };
var d = new Date();
var year = d.getFullYear();
var monthName = ["January", "February", "March", "April","May","June", "July", "August", "September", "October", "November", "December"];
var month = d.getMonth();
var date = monthName[month] + "" + 1 + "" + year;
var tmp = new Date(date).toDateString();
var firstDay = tmp.substring(0, 3);
var dayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayNumber = dayName.indexOf(firstDay);
var days = new Date(year, month+1, 0).getDate();
var getMonthText = function() {
var monthText = monthName[d.getMonth()];
var message = monthText + " " + year;
document.getElementById("month_year").innerHTML = message;
};
var displayCalendar = function(dayNumber, days) {
var table = document.getElementById("calendar");
var row = document.createElement("tr");
for (var i = 1; i < 6; i++) {
row = table.insertRow(-1);
for (var j = 0; j < days; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = days[i];
}
}
table.innerHTML = "";
table.appendChild(row);
};
window.onload = function () {
getMonthText();
displayCalendar(dayNumber, days);
};
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
</head>
<body>
<main>
<h1 id="month_year"> </h1>
<table id="calendar">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
</table>
</main>
</body>
</html>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 360px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
margin-bottom: .25em;
}
table {
border-collapse: collapse;
border: 1px solid black;
}
td {
width: 3em;
height: 3em;
vertical-align: top;
padding: 0.5 0 0 0.5;
border: 1px solid black;
}
我对您的代码做了一些更改。您试图访问一个整数变量的位置,因此导致了未定义的值。此外,我已经实现了工作日的逻辑,在第一周插入空单元格。
当一周中的天数超过6时,它会重置,将行追加到表中,然后创建新行。
"use strict";
var $ = function (id) { return document.getElementById(id); };
var d = new Date();
var year = d.getFullYear();
var monthName = ["January", "February", "March", "April","May","June", "July", "August", "September", "October", "November", "December"];
var month = d.getMonth();
var date = monthName[month] + "" + 1 + "" + year;
var tmp = new Date(date).toDateString();
var firstDay = tmp.substring(0, 3);
var dayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayNumber = dayName.indexOf(firstDay);
var days = new Date(year, month+1, 0).getDate();
var getMonthText = function() {
var monthText = monthName[d.getMonth()];
var message = monthText + " " + year;
document.getElementById("month_year").innerHTML = message;
};
var displayCalendar = function(dayNumber, days) {
var table = document.getElementById("calendar");
var row = document.createElement("tr");
var weekdays = 0;
var firstDate = new Date(year, month, 1);
var weekdays = firstDate.getDay();
var current_row = table.insertRow(-1);
for(var i=0; i < weekdays; i++) {
current_row.insertCell(-1);
}
table.appendChild(current_row);
weekdays--;
for(var ds = 1; ds <= days; ds++) {
if(weekdays == 6){
weekdays = 0;
table.appendChild(current_row);
current_row = table.insertRow(-1);
} else {
weekdays++;
}
var cell = current_row.insertCell(-1);
cell.innerHTML = ds;
}
};
getMonthText();
displayCalendar(dayNumber, days);
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 360px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
margin-bottom: .25em;
}
table {
border-collapse: collapse;
border: 1px solid black;
}
td {
width: 3em;
height: 3em;
vertical-align: top;
padding: 0.5 0 0 0.5;
border: 1px solid black;
}
<main>
<h1 id="month_year"> </h1>
<table id="calendar">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
</table>
</main>