万年カレンダーの表示HTML

user_32790428908094464

: 万年カレンダーの表示HTML

デスクトップなどに置いて使える万年カレンダーを生成します。生成されたサンプルは次のURLにも置いてあります。 mori1-hakua.tokyo/test/GMOcalendar.html

投稿日時：

プロンプト実行例
プロンプトを見る

デスクトップなどで使える万年カレンダーです。生成されたサンプルは、次の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()">&#171; 前月</button>
41  <h1 id="currentMonth"></h1>
42  <button onclick="nextMonth()">次月 &#187;</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部分では、前月と次月のボタンがクリックされた際に、カレンダーが更新されるようになっています。

他のプロンプトもチェック

要約
60点を100点にするプロンプト
AIの生成結果に納得いかない時に繰り返し使えるプロンプト
9
0
8
408
user_122129646672062464
音楽
UDIOのプロンプト、カスタムコマンドメーカー
UDIO プロンプト作成アシスタントへようこそ！このアシスタントは、あなたの音楽アイデアを UDIO のプロンプト、歌詞、カスタムコマンドに変換するお手伝いをします。使い方 * 曲のアイデアを共有: どのような曲を作りたいか、具体的なイメージや雰囲気などを教えてください。 * 生成箇所を指定: 曲のどの部分（イントロ、バース、コーラスなど）の歌詞やプロンプトを作成したいか、指定してください。未指定の場合は、曲全体の構造を提案します。 * 詳細な指示: 歌詞の言語、曲の構造、雰囲気、使用したい楽器など、より詳しい指示があれば教えてください。例 * 簡単な例: 「アップテンポなダンスミュージックを作りたいです。歌詞は英語で、未来的な雰囲気を出したいです。」 * 詳細な例: 「80年代風のシンセポップを作りたいです。イントロはパッドで雰囲気を作り、バースはキャッチーなメロディで、コーラスは高揚感あふれる歌詞で構成したいです。歌詞は日本語でお願いします。」出力内容 * プロンプト: UDIO に入力するテキストで、曲の雰囲気、ジャンル、楽器などを指定します。 * 歌詞: 指定されたセクションの歌詞を生成します。 * カスタムコマンド: UDIO の機能を拡張するための特別な命令です。その他 * プロンプトのレベル: プロンプトの複雑さを6段階に設定できます。詳細な指示が必要な場合は、レベルを上げてください。 * 繰り返し: 生成された結果が気に入らなければ、プロンプトを修正して再度生成できます。あなたの音楽アイデアを形にするために、このアシスタントを最大限活用してください！早速、あなたの曲のアイデアを教えてください！
0
0
10
48
user_128533300405555200
物語・脚本・プロット
推奨モデル - Gemini
名言ジェネレーター　～心に響く感動の名セリフを創ろう
　入力したテーマに基づいてオリジナルの名言を生成するプロンプトです。感情を深く掘り下げ、強力な言葉や比喩を用いて、心に響く名言を5つ作り上げます。「Gemini 1.5 Pro」に切り替えて実行するのが一番良さそうです。＜用途例＞　【プレゼンテーションやスピーチ】感動的な名言を引用することで、聴衆の関心を引き、メッセージを強調します。【SNSやブログの投稿】心に響く名言を投稿することで、フォロワーの共感を得ることができます。【自己啓発やモチベーションアップ】毎日の励ましや自己反省の一環として、自分に向けた名言を作成し、モチベーションを維持します。【ギフトやカードのメッセージ】特別な日に贈るカードやギフトに添えるオリジナルの名言で、相手に感動を与えます。　＜メリット＞　【クリエイティブな表現力の向上】自分自身の感情や考えを言葉にすることで、表現力が養われます。【個性を反映】自分だけの名言を作成することで、個性や独自の視点を表現できます。【感動や共感を生む】感情に訴える名言を作成することで、他者との共感を深めることができます。【簡単で楽しい】指定された手順に従うだけで、簡単に魅力的な名言を作成できます。　　「　ぜひ、あなたの唯一無二の名言を創り出してください。感動を呼び起こし、日常に彩りを与えるオリジナルの名言があなたの人生を変えるかもしれません。
7
0
43
155
VEP
画像生成
キャラクター作成
推奨モデル - DALL•E 3
【人物版】一筆書きラインアート【SNSアイコンにおすすめ】
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 AIを使ってSNSのアイコンに最適なシンプルでちょうどいいおしゃれな一筆書きアートが出力できるツールです。あなたの顔を一筆書きでAIがイラスト化します。線が細くおしゃれな印象を与えるので、センスのいいLINEトプ画を作成したい人におすすめ。 #LINE #instagram #TikTok #sns #twitter
6
2
59
185
Tam-BizAI編集長

万年カレンダーの表示HTML

コメント 0

他のプロンプトもチェック