万年カレンダーの表示HTML
デスクトップなどに置いて使える万年カレンダーを生成します。 生成されたサンプルは次のURLにも置いてあります。 mori1-hakua.tokyo/test/GMOcalendar.html
投稿日時:
- プロンプト実行例
- プロンプトを見る
![万年カレンダーの表示HTML](https://oshiete.ai/images/thumbnail_options/gradation/gradation30.jpg?w=96&h=96)
デスクトップなどで使える万年カレンダーです。 生成されたサンプルは、次のURLにも置いてあります。 https://mori1-hakua.tokyo/test/GMOcalendar.html
![](/public/default_user_icon.gif)
開始曜日
土曜色
日曜色
本日背景
![万年カレンダーの表示HTML](https://oshiete.ai/images/thumbnail_options/gradation/gradation30.jpg?w=96&h=96)
は、要件に従って作成されたHTML、CSS、JavaScriptを含む完全なコードです。
html1<!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
他のプロンプトもチェック
マーケティング一般
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 ショート動画で最も重要な冒頭3秒の台本作成に特化したプロンプトです。リールやYouTubeショート、TikTokで情報発信している人は、ぜひお気に入りにして活用してみて下さい。 #インスタグラム #instagram #tiktok #ショート動画 #マーケティング201127592GPTs
キャラクター作成
現実の写真と区別がつかないほどのリアルな写真を生成します。 さらに、生成したオブジェクトやデザインを新しいシナリオに再利用する際にも精度と一致度の高い画像を生成します。文案作成
推奨モデル - Claudeあなたの納得するまで、何度でも、成果物を改善します。 ---------------------------------- 懐かしいのが最近Xでバズっているので紹介。 無茶ぶりして何度でもLLMの出力を改善させます。by Note CXO 深津さん 指示を出して、回答が戻ってきたら次の指示を出します。これを繰り返す。 (以下の同じプロンプトをコピペで使えるのがミソ) 「では、この出力を60点とします。これを60点とした時に100点とはどのようなものですか? 100点にするために足りないものを列挙した後に、100点の答えを生成してください」 参照 https://www.youtube.com/live/YX0_GvD0jkE?si=89U09ZyDLruLlAtD 57分あたり。 ------------------ ■進化版(Claude版) by 生成AI塾 元木大介さん 「この出力を60点とします。OpenAIのGPTとGoogleのGeminiは100点レベルの出力をしてくれました。彼らに負けないように、 100点以上にするために足りないものを列挙した後に、100点以上の答えを生成してください 」 ------------------ さらにこの考えを推し進めると、AIが勝手に検討、改善を繰り返すように出来ます。 勝手に60点と言うのではなく、評価ロジックを作って評価させ、どこを改善したらよいか 考えさせてもよい。とういうか、そうしないと、何回目かですぐに破綻します。 方向性をうまく示して自動ループさせる。ちょっとAGIに近づく。。 GPT-4oはあまり改善してくれませんが、Claud3.5になって劇的に改善してくれるので 今頃またバズっているのでしょうか。 (でも回数を重ねると、Claud3.5の方があらぬ方向に。。)90451.36K計画立案
世界のハッカソン、[Best Template」部門での優勝作品! 計画立案、文案作成、FAQ作成など、あらゆる成果物追及プロンプトの基本となるプロンプトです。13113369