方法1: JavaScriptを使用する方法 最も一般的な方法は、JavaScriptを使用して現在の日時を取得し、それをHTML要素に表示する方法です。以下はその例です。
<!DOCTYPE html>
<html>
<head>
<title>リアルタイムの時計表示</title>
<script>
function displayTime() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById('clock').textContent = time;
}
setInterval(displayTime, 1000); // 1秒ごとに時刻を更新
</script>
</head>
<body>
<h1>リアルタイムの時計</h1>
<div id="clock"></div>
</body>
</html>この例では、displayTimeというJavaScript関数を定義し、setInterval関数を使用して1秒ごとに時刻を更新しています。getElementByIdメソッドを使用して、clockというIDを持つHTML要素に時刻を表示しています。
方法2: CSSアニメーションを使用する方法 もう一つの方法は、CSSアニメーションを使用して時計を表示する方法です。以下はその例です。
<!DOCTYPE html>
<html>
<head>
<title>リアルタイムの時計表示</title>
<style>
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.clock {
animation: rotate 60s infinite linear; /* 60秒ごとにアニメーションを繰り返す */
transform-origin: center center;
}
</style>
</head>
<body>
<h1>リアルタイムの時計</h1>
<div class="clock">現在の時刻</div>
</body>
</html>この例では、CSSの@keyframesルールを使用してアニメーションを定義し、animationプロパティを使用して時計の回転を制御しています。clockというクラスが付いたHTML要素に、現在の時刻が表示されます。
これらはHTMLでリアルタイムの時計を表示するための一般的な方法のいくつかです。必要に応じて、デザインやスタイリングをカスタマイズすることもできます。