JavascriptでWebブラウザに全画面でデジタル時計を表示するスクリプトを、AIにすべて教えてもらって作成した例。
時計を表示するスケルトンを作成
画面位置やフォントの大きさなどを無視して、単純に時計を表示し続けるスクリプトを、Microsoft Copilotに教えてもらいます。
AIに質問
javascriptでブラウザ画面に（hh:mm:ss形式で）時計を表示するスクリプトを例示してください
答えは次の通り
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>時計表示</title>
</head>
<body>
<p id="clock"></p>
<script src="clock.js"></script>
</body>
</html>
javascriptは <p id="clock"></p> が読み込まれた後で実行されるように、該当行より下に読み込み処理する。
clock.js
function updateClock() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
// 1桁の数字を2桁にする
hours = hours.toString().padStart(2, '0');
minutes = minutes.toString().padStart(2, '0');
seconds = seconds.toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById('clock').textContent = timeString;
}
// 1秒ごとにupdateClock関数を実行
setInterval(updateClock, 1000);
// ページ読み込み時に時計を表示
updateClock();
スクリプトの実行例 （フォントサイズが通常の文字列なので、全画面表示では小さすぎる...）
画面中央に、大きなフォントで表示するには
AIに質問
ひとつ前の質問で、次の条件も加えたスクリプトを教えてください。 画面中央に表示する。 画面幅の10分の1程度のフォントで表示する。
AIの回答は次の通り
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>時計表示</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#clock {
font-size: 10vw; /* 画面幅の10分の1のフォントサイズ */
}
</style>
</head>
<body>
<p id="clock"></p>
<script src="clock.js"></script>
</body>
</html>
AIからのメッセージとして
" CSSのflexプロパティを使用して時計を画面中央に配置し、font-sizeを10vwに設定して画面幅の10分の1のフォントサイズにしています。 "
フォントを画面幅の1/10にした時の実行例
年月日と時刻の2段表示とする
AIに質問
一つ上の質問に、次の条件も加えたスクリプトを教えてください。 （yyyy/mm/dd形式の）年月日と（hh:mm:ss形式の）時刻の２段表示とする。画面の中央に表示する。画面幅の10分の１のフォントで表示する。
AIの回答は次の通り
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日時表示</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 10vw; /* 画面幅の10分の1のフォントサイズ */
text-align: center;
}
#date-time {
line-height: 1.2;
}
</style>
</head>
<body>
<div id="date-time"></div>
<script src="clock.js"></script>
</body>
</html>
clock.js
function updateDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const date = `${year}/${month}/${day}`;
const time = `${hours}:${minutes}:${seconds}`;
document.getElementById('date-time').innerHTML = `${date}
${time}`;
}
setInterval(updateDateTime, 1000);
updateDateTime();
このスクリプトを実行すると、 <br> が効いていないようで、年月日と時刻の間で改行されていない。
スクリプトの実行例 （日付・時刻を2段表示しようとしたが...）
画面中央に2行を表示するには
AIに質問
Webブラウザの左右中央に、2つの文字列を、上下２段に表示するHTMLコードを教えてください
AIの回答は次の通り
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中央配置</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.container div {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div>文字列1</div>
<div>文字列2</div>
</div>
</body>
</html>
この方法を、時計の2段表示に適用すれば
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 10vw;
/* 画面幅の10分の1のフォントサイズ */
}
.container {
text-align: center;
}
.container div {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div id="date"></div>
<div id="time"></div>
</div>
<script src="clock.js"></script>
</body>
</html>
clock.js
function updateDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const date = `${year}/${month}/${day}`;
const time = `${hours}:${minutes}:${seconds}`;
document.getElementById('date').innerHTML = `${date}`;
document.getElementById('time').innerHTML = `${time} `;
}
setInterval(updateDateTime, 1000);
updateDateTime();
スクリプトの実行例 （日付・時刻の２段表示ができて、目指していたものが得られた）
