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