昨日は7のぞろ目だった。
令和7年7月7日7時7分7秒の瞬間のスクショを取りたかったが、気が付くのが遅かった。
デジタル時計のHTMLソースコードをAIに作らせてちょっとだけ編集してみた。
下のスクショは試しに今日やってみた。
来年の令和8年8月8日08時08分08秒の末広がりオンパレードの時刻を覚えていたらスクショしよっと。
令和11年11月11日11時11分11秒は楽しみ。
HTMLは以下の通り。
これを、メモ帳にコピーして、html形式で保存する。
保存の仕方は、
ファイル名を “好きなファイル名,html” とする、「,html」（英半角小文字）は必ずつけること。
ファイル種類は “すべてのファイル” とすること。（これを選択しないとテキストファイルになってしまう。）
これで保存すれば、ブラウザのアイコンになるはず。
これをダブルクリックすれば、表示される。
また、メモ帳にコピーした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;
min-height: 100vh;
background-color: #87cefa;
color: #0000cd;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
flex-direction: column;
gap: 20px;
}
#clockContainer {
display: flex;
gap: 20px; /* 各要素間のスペース */
font-weight: bold;
}
#eraDisplay {
font-size: 5em;
}
#dateDisplay {
font-size: 5em;
}
#timeDisplay {
font-size: 5em;
letter-spacing: 5px;
}
</style>
</head>
<body>
<font size="4">記念する時刻をスクショしてみよう</font>
<font size="5"><font color="#ff6347">ここにコメントを入れる</font></font>
<div id="clockContainer">
<div id="eraDisplay"></div>
<div id="dateDisplay"></div>
<div id="timeDisplay"></div>
</div>
<script>
function updateClock() {
const now = new Date();
// 年号の表示（令和対応）
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
let eraYear = year - 2018; // 令和元年 (2019年) からの経過年数
let eraName = "令和";
if (year < 2019) {
eraName = "西暦";
eraYear = year;
} else if (year === 2019 && (month < 5 || (month === 5 && day < 1))) {
eraName = "平成";
eraYear = year - 1988;
} else if (year === 2019 && month === 5 && day >= 1) {
eraName = "令和";
eraYear = 1;
} else {
eraName = "令和";
eraYear = year - 2018;
}
document.getElementById('eraDisplay').textContent = eraName;
document.getElementById('dateDisplay').textContent = `${eraYear}年${month}月${day}日`;
// 時刻の表示
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 formattedTime = `${hours}:${minutes}:${seconds}`;
document.getElementById('timeDisplay').textContent = formattedTime;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
0 件のコメント:
コメントを投稿