- プロンプト実行例
こんにちは！
作りたいもの
。
- どのようなデザイン、機能をご希望でしょうか？それに応じて、具体的なスクリプトコードを作成することができます。
デジタル時計
デジタル時計を作成するために、HTML、JavaScript、およびCSSを使用して時計を生成することができます。以下に、基本的なデジタル時計の例を示します。
まず、HTMLファイルで次のようなコードを記述します。
html1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Digital Clock</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9<body> 10 <div class="digital-clock"> 11 <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span> 12 </div> 13 <script src="script.js"></script> 14</body> 15</html>
次に、CSSファイル（styles.css）で、時計のデザインを設定します。
css1.digital-clock { 2 font-size: 2rem; 3 font-family: Arial, sans-serif; 4 text-align: center; 5 padding: 20px; 6 background-color: #f2f2f2; 7}
そして、JavaScriptファイル（script.js）で、時計の動作を設定します。
JavaScript1function updateClock() { 2 const now = new Date(); 3 const hours = String(now.getHours()).padStart(2, "0"); 4 const minutes = String(now.getMinutes()).padStart(2, "0"); 5 const seconds = String(now.getSeconds()).padStart(2, "0"); 6 7 document.getElementById("hours").textContent = hours; 8 document.getElementById("minutes").textContent = minutes; 9 document.getElementById("seconds").textContent = seconds; 10} 11 12setInterval(updateClock, 1000);
これで、デジタル時計を表示するための基本的なHTML、CSS、JavaScriptが揃いました。ブラウザでHTMLファイルを開くと、デジタル時計が表示されます。
もし、デザインや機能にこだわりがあれば、カスタマイズすることも可能です。デザインを重視したリアルタイム時計の要件に応じて、さらに詳細なカスタマイズが必要であれば、お知らせください。
コメント 0
他のプロンプトもチェック
GPTs
メール作成
今日のニュースや幸せな気分になれる話など、その日の気分に合わせて朝礼のネタ出しをしてくれるAIです。 きちんと引用元も示してくれることで、深堀りしたい場合や気になった場合はよりきちんと調べることができます。 基本的に前向きな気持ちになれるニュースや楽しい気持ちになれるニュースを集めてくるようになっているので、1日のスタートにぴったりなAIとなっています。01146402評価・分類
推奨モデル - GPT-4oAI生成による文章かそうでないかを色んな観点から徹底的に判定してくれる最新AI！複雑プロンプトを盛り込んでいるから正確さもすごい！10554資料作成
推奨モデル - Claudeプロンプトの最適化をするプロンプトです。 ★Claude 3.5 Sonnet★を選択してお使いください。 Sonnet以外だと残念なブログになることが多いです。 質問に対して自分が望んでいることを答えて行くだけで、大量の文章を生成するようなプロンプトを作ってくれます。入力に応じて情報のリストを１０個提示してそこから選ぶように促されますが、その選択肢によらずに自分が興味がある内容を書いても構いません。サンプルはダイエットについてぶっきらぼうな指示を出すだけで６０００字以上の記事が生成されています。 なお、「〜して」というような指示を出すと初期設定を忘れてブログを作り始めるので、事実を羅列するような入力をしてください。 最後に「プロンプトを作成して」、と指示を出してください。その後、「上記の内容でブログを作成して」と指示を出すと、一気に作成してくれます。途中止まったら「続き」と入力すると再開します。 内容によっては突然記事を作成し出すこともあるので、色々試して見てください。こちらの入力次第で相当有能なライターに化けてくれます！！！7045153資料作成
推奨モデル - GPT-4o英文を提供すると、自動的にKahoot!の４択問題を作成します。正解の選択肢は常に１に配置するようにしているので、正解・誤答のチェックはしやすいと思います。 英語で作成していますが、日本語で指示を出すと日本語で応じるので、他の科目にも応用ができると思います。2018157
