- プロンプト実行例

こんにちは!

作りたいもの

。
- どのようなデザイン、機能をご希望でしょうか?それに応じて、具体的なスクリプトコードを作成することができます。

デジタル時計

デジタル時計を作成するために、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
システム開発
オリジナルサインの作成のGPTs ちょっとキャラクターを乗っけています。 生成系AIは、今のところ漢字を描くのが苦手なので、ローマ字で登録ください。 (ローマ字もたまに間違えますが)211.58K3.54Kマーケティング一般
推奨モデル - GPT-4o🌟テーマを送るだけで、アイデアの魔法がスタート! 🌟 あなたの頭の中では考えつかない、✨「常識外れ」✨の発想が次々と生まれます。そのテーマに付帯する「常識」を全て洗い出し、一つ一つぶち破ります。壁にぶつかったクリエイター、事業主、起業家、企画担当者…🚀 「次の一手」を探しているすべての人の強力なパートナー です。 🌀 一見、奇抜すぎる発想も「可能性の宝庫」 🎯 荒唐無稽に見えるアイデアの中には、未来を変えるヒントが隠れています。その小さな種を、じっくりと育ててみてください。🌱 非現実的なアイデアこそが、斬新なコンセプトの出発点です! 🔧 創造のプロセスを楽しもう! ✨ どんなに突飛なアイデアも、現実的な要素と組み合わせたりアレンジしたりすることで、💡 新しい道筋 が見えてきます。その先には、🌈 唯一無二の解決策やコンセプト が待っています! 💥 「もっと」と入力して、アイデアをさらに深掘りしよう! 常識の壁を壊し、想像のその先を目指して何度も挑戦してください。🎉 あなたの未来が輝き出す瞬間を、私たちと一緒に見届けましょう! 🔥 さあ、新しい可能性を探しに行こう! 🚀202869マーケティング一般
推奨モデル - GPT-4oWebマーケティングで成果を出したい?何から始める?もう悩むのは終わり!あなたのモヤモヤを、AIが具体的なアクションプランに変えます。いますぐ、一歩踏み出そう!10574文案作成
推奨モデル - Gemini教えてAIのコンテストのGPTs部門で優勝した自動ブログ記事作成GPT「ゴーストブロガー」のシステムプロンプトを短くまとめたものです。「天秤AI」からプロンプトを呼び出して色んなAIモデルで使えるようにしました。お気に入りに登録してお使いください。Claude 3 OpusやGemini 1.5 Proでの使用がおすすめです。25064500