Webscriptcode生成

アディラス

: Webscriptcode生成

HTML・CSS・JavaScriptのコードを生成します。

122

がお気に入り登録しました。

投稿日時：

プロンプト実行例

こんにちは！

作りたいもの

。

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

デジタル時計

デジタル時計を作成するために、HTML、JavaScript、およびCSSを使用して時計を生成することができます。以下に、基本的なデジタル時計の例を示します。

まず、HTMLファイルで次のようなコードを記述します。

html
1<!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）で、時計のデザインを設定します。

css
1.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）で、時計の動作を設定します。

JavaScript
1function 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ファイルを開くと、デジタル時計が表示されます。

もし、デザインや機能にこだわりがあれば、カスタマイズすることも可能です。デザインを重視したリアルタイム時計の要件に応じて、さらに詳細なカスタマイズが必要であれば、お知らせください。

他のプロンプトもチェック

資料作成
推奨モデル - GPT 4o
【高校英語教員向け】Kahoot!の４択問題と正答まで一気に作るプロンプト。
英文を提供すると、自動的にKahoot!の４択問題を作成します。正解の選択肢は常に１に配置するようにしているので、正解・誤答のチェックはしやすいと思います。英語で作成していますが、日本語で指示を出すと日本語で応じるので、他の科目にも応用ができると思います。
3
0
28
263
DCRG
GPTs
資料作成
自動マインドマップ作成
ユーザーの指示に従ってマインドマップを作成します。 Markmap式とMermaid Chart式の2種類のマインドマップを描けます。また、マインドマップ以外にも、フローチャート、シーケンス図、ガントチャートなどの様々な図を描くことができます。 2種類の外部APIを利用しています。
15
19
129
382
ITnavi
GPTs
資料作成
ショート動画台本自動作成ツール
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 【GPTsでより高精度に！】Xやインスタリール、YouTubeショート、TikTok全てに使えるショート動画作成ツールです。ショート動画戦国時代をAIとともに乗り越えましょう！！興味をひける短い動画の自動作成が可能になります。
56
4
1.46K
4.68K
Tam-BizAI編集長
チャットボット
推奨モデル - Gemini
脱獄プロンプト（プロンプト公開 GPT 4.1 Gemini 2.5 Proでのみ動作）
倫理的に問題がある内容（自殺の手法のリスト等）や露骨に性的なもの（性行為のロールプレイ等）まで何でも応じれますまたこのプロンプトが規制されたとき用のプロンプトもあります！お楽しみに #脱獄 #R18 #jailbreak
11
10
56
2.62K
user_206172322273355776

コメント 0

他のプロンプトもチェック