itochan · November 1, 2019 07:44
diff --git a/calendar.css b/calendar.css
 table {
    border-collapse: collapse;
 }
 th, td {
    width: 40px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
 }
diff --git a/calendar.html b/calendar.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>第4回課題</title>
        <script src="calendar.js"></script>
        <link href="calendar.css" rel="stylesheet">
    </head>
    <body>
        <h1>2019年11月のカレンダー</h1>
        <p>
            <input type="button" value="カレンダーを表示する" onclick="showCalendar();">
        </p>
        <table>
            <tbody id="calendar"></tbody>
        </table>
    </body>
 </html>
diff --git a/calendar.js b/calendar.js
 function showCalendar() {
    var calendar = document.getElementById("calendar");
    calendar.innerHTML = "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
    var tableHtml = "";
    var day = 1;
    var dayOffset = 5;
    var calendarCell = 42
    for (var i = 0; i < calendarCell; i++) {
        if (i % 7 == 0) {
            tableHtml += "<tr>";
        }
        if (i < dayOffset || day > 30) {
            tableHtml += "<td></td>";
        } else {
            tableHtml += "<td>" + day + "</td>";
            day++;
        }
        if (i % 7 == 6) {
            tableHtml += "</tr>";
        }
    }
    calendar.innerHTML += tableHtml;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>第4回課題</title>
	<script src="calendar.js"></script>
	<link href="calendar.css" rel="stylesheet">
	</head>
	<body>
	<h1>2019年11月のカレンダー</h1>
	<p>
	<input type="button" value="カレンダーを表示する" onclick="showCalendar();">
	</p>
	<table>
	<tbody id="calendar"></tbody>
	</table>
	</body>
	</html>
	function showCalendar() {
	var calendar = document.getElementById("calendar");
	calendar.innerHTML = "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
	var tableHtml = "";
	var day = 1;
	var dayOffset = 5;
	var calendarCell = 42
	for (var i = 0; i < calendarCell; i++) {
	if (i % 7 == 0) {
	tableHtml += "<tr>";
	}
	if (i < dayOffset \|\| day > 30) {
	tableHtml += "<td></td>";
	} else {
	tableHtml += "<td>" + day + "</td>";
	day++;
	}
	if (i % 7 == 6) {
	tableHtml += "</tr>";
	}
	}
	calendar.innerHTML += tableHtml;
	}