HTMLで現在の日付と時刻を表示する方法

1. 日付の表示: 以下のコードをHTMLファイル内に追加すると、現在の日付が表示されます。

<p id="date"></p>
<script>
  var currentDate = new Date();
  var dateElement = document.getElementById("date");
  dateElement.innerHTML = currentDate.toDateString();
</script>

このコードでは、<p>要素にid属性を設定し、JavaScriptでその要素を取得しています。new Date()を使用して現在の日付を取得し、toDateString()メソッドを使用して日付を文字列に変換して表示しています。

2. 時刻の表示: 以下のコードをHTMLファイル内に追加すると、現在の時刻が表示されます。

<p id="time"></p>
<script>
  function updateTime() {
    var currentTime = new Date();
    var timeElement = document.getElementById("time");
    timeElement.innerHTML = currentTime.toLocaleTimeString();
  }
  setInterval(updateTime, 1000); // 1秒ごとに時刻を更新
</script>

このコードでは、<p>要素にid属性を設定し、JavaScriptでその要素を取得しています。updateTime()関数では、new Date()を使用して現在の時刻を取得し、toLocaleTimeString()メソッドを使用して時刻を文字列に変換して表示しています。setInterval()関数を使用して、1秒ごとにupdateTime()関数が呼び出されるようにしています。