万年カレンダーの表示HTML
デスクトップなどに置いて使える万年カレンダーを生成します。 生成されたサンプルは次のURLにも置いてあります。 mori1-hakua.tokyo/test/GMOcalendar.html
0
0
158
10
投稿日時：
- プロンプト実行例
- プロンプトを見る
デスクトップなどで使える万年カレンダーです。 生成されたサンプルは、次のURLにも置いてあります。 https://mori1-hakua.tokyo/test/GMOcalendar.html
開始曜日
土曜色
日曜色
本日背景
は、要件に従って作成された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
他のプロンプトもチェック
GPTs
チャットボット
ドラマなどを見てて、「この俳優、誰かに似てる！？ でも名前が出てこない・・・」ってことありませんか？ このGPTは、日本の有名人の名前を入力するだけで、顔の特徴や雰囲気が他の誰と似ているのかをリサーチします。気になる有名人が他のどんな有名人に似ていると世間で言われているのかを簡単に知ることができます。 ＜どんなときに使う？＞ ・友人や同僚と話していて「この人、誰に似てるんだろう？」と気になったときに、このツールで調べてみましょう。意外な共通点を見つけて盛り上がること間違いなし！ ・テレビに出ている有名人を見て「誰かに似てるな」と思ったけど、名前が思い出せないときにも便利です。 ・お気に入りに入れておけば、ドラマなどを見ていて気になったときにすぐ調べられます。 ・似ている有名人を見つけることで、説得力のある資料を作成したり、インスピレーションを得たりすることができます。 ・人気の有名人が他の誰に似ているのかを調べて、SNSで共有することで、話題性のある投稿ができます。 ＜注意事項＞ 類似性のリサーチ結果はあくまで参考情報です。実際の人物に対する誹謗中傷などには利用しないでください。 ---------- 😊少しでも気に入っていただけましたら、お気に入り（❤マーク）をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、「いつか使ってみよう」と思っている方も、お気に入りに登録しておくと、いつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。00241880GPTs
マーケティング一般
インスタ運用のプロが使用する分析指標をそのまま取り入れました！分析からアドバイスまで行うので初心者でも安心！フォロワー増えること間違いなしの自信作です！ oshiete.ai/profiles/GrokGPTs←こいつ色んな人のGPTsパクってます！このGPTもパクられました！皆さん注意してください #SNS #マーケティング #ビジネス #コンテンツ #アフィリエイト #広告 #AI #玉垣パクるなよ40214459
