万年カレンダーの表示HTML
デスクトップなどに置いて使える万年カレンダーを生成します。 生成されたサンプルは次のURLにも置いてあります。 mori1-hakua.tokyo/test/GMOcalendar.html
0
0
199
10
投稿日時：
- プロンプト実行例
- プロンプトを見る
デスクトップなどで使える万年カレンダーです。 生成されたサンプルは、次のURLにも置いてあります。 https://mori1-hakua.tokyo/test/GMOcalendar.html
開始曜日
土曜色
日曜色
本日背景
は、要件に従って作成されたHTML、CSS、JavaScriptを含む完全なコードです。
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <style>
6 body {
7 font-family: Arial, sans-serif;
8 }
9 table {
10 width: 100%;
11 border-collapse: collapse;
12 margin-top: 20px;
13 }
14 th, td {
15 border: 1px solid #000;
16 padding: 10px;
17 text-align: center;
18 }
19 th {
20 background-color: #f2f2f2;
21 }
22 td.today {
23 font-weight: bold;
24 background-color: yellow;
25 border: 2px solid #000;
26 }
27 td.sunday {
28 color: red;
29 font-weight: bold;
30 }
31 td.saturday {
32 color: blue;
33 font-weight: bold;
34 }
35 </style>
36</head>
37<body>
38
39<div>
40 <button onclick="prevMonth()">« 前月</button>
41 <h1 id="currentMonth"></h1>
42 <button onclick="nextMonth()">次月 »</button>
43</div>
44
45<table id="calendar">
46 <tr>
47 <th>日</th>
48 <th>月</th>
49 <th>火</th>
50 <th>水</th>
51 <th>木</th>
52 <th>金</th>
53 <th>土</th>
54 </tr>
55</table>
56
57<script>
58 let currentDate = new Date();
59 let currentYear = currentDate.getFullYear();
60 let currentMonth = currentDate.getMonth();
61
62 function generateCalendar(year, month) {
63 let firstDay = new Date(year, month, 1);
64 let lastDay = new Date(year, month + 1, 0);
65
66 document.getElementById('calendar').innerHTML = '';
67
68 // Add current month and year to heading
69 document.getElementById('currentMonth').innerText = `${year}年${month + 1}月`;
70
71 // Add day names to the table
72 let dayNames = ['日', '月', '火', '水', '木', '金', '土'];
73 let headerRow = document.getElementById('calendar').insertRow();
74 for (let i = 0; i < 7; i++) {
75 let cell = headerRow.insertCell();
76 cell.appendChild(document.createTextNode(dayNames[i]));
77 }
78
79 // Add dates to the table
80 let date = new Date(firstDay);
81 let calendarBody = document.getElementById('calendar');
82 let row = calendarBody.insertRow();
83 for (let i = 0; i < firstDay.getDay(); i++) {
84 let cell = row.insertCell();
85 cell.appendChild(document.createTextNode(new Date(year, month, 0).getDate() - (firstDay.getDay() - 1) + i));
86 cell.style.color = '#ccc';
87 }
88
89 for (let i = 1; i <= lastDay.getDate(); i++) {
90 date.setDate(i);
91 if (date.getDay() === 0) {
92 row = calendarBody.insertRow();
93 }
94 let cell = row.insertCell();
95 cell.appendChild(document.createTextNode(i));
96 if (year === currentDate.getFullYear() && month === currentDate.getMonth() && i === currentDate.getDate()) {
97 cell.classList.add('today');
98 }
99 if (date.getDay() === 0) {
100 cell.classList.add('sunday');
101 } else if (date.getDay() === 6) {
102 cell.classList.add('saturday');
103 }
104 }
105
106 for (let i = lastDay.getDay() + 1; i < 7; i++) {
107 let cell = row.insertCell();
108 cell.appendChild(document.createTextNode(i - lastDay.getDay()));
109 cell.style.color = '#ccc';
110 }
111 }
112
113 function prevMonth() {
114 currentMonth -= 1;
115 if (currentMonth < 0) {
116 currentYear -= 1;
117 currentMonth = 11;
118 }
119 generateCalendar(currentYear, currentMonth);
120 }
121
122 function nextMonth() {
123 currentMonth += 1;
124 if (currentMonth > 11) {
125 currentYear += 1;
126 currentMonth = 0;
127 }
128 generateCalendar(currentYear, currentMonth);
129 }
130
131 generateCalendar(currentYear, currentMonth);
132</script>
133
134</body>
135</html>このコードは、指定された要件に従って万年カレンダーを作成します。年月表示の上には前月と次月の移動ボタンがあり、日曜日と土曜日の日付に色が付けられ、本日の日付には特別なスタイルが適用されます。JavaScript部分では、前月と次月のボタンがクリックされた際に、カレンダーが更新されるようになっています。
コメント 0
他のプロンプトもチェック
GPTs
資料作成
月次、四半期、年次の会計報告のフォーマットやテンプレートを提供するGPTGPTs
システム開発
オリジナルサインの作成のGPTs ちょっとキャラクターを乗っけています。 生成系AIは、今のところ漢字を描くのが苦手なので、ローマ字で登録ください。 （ローマ字もたまに間違えますが）212.05K5.30Kマーケティング一般
推奨モデル - ChatGPT○○年前の○○と実際の○○ のようなツイートを生成できます！ 例:100年前の日本 実際の100年前の日本20883
