javascript リアルタイムに時刻を表示する

作成日 2022.03.26
更新日 2022.10.28
javascript
javascript

javascriptで、リアルタイムに時刻を表示するサンプルコードを記述してます。現在日時を取得して時分秒に分けて表示して「setInterval」を使用して決まった間隔で実行することで表示できます。

1. 環境
2. リアルタイムに時刻を表示
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 107.0.5304.63

Javascript サンプル集はこちら

リアルタイムに時刻を表示

リアルタイムに時刻を表示するには、「Date」で現在日時を取得して時分秒に分けて「setInterval」で決まった間隔で実行します。

実際に、実行してみます。

${}(テンプレートリテラル)の使い方

<p id="sample"></p>

<script>

function zero( num) {
  if (num < 10)  num = "0" + num   
  return num;
}

function nowTime() {
  
  const date = new Date(); //現在日時
  
  const h = zero( date.getHours() );   //時
  const m = zero( date.getMinutes() ); //分
  const s = zero( date.getSeconds() ); //秒

  // 表示
  document.getElementById("sample").innerHTML = `${h}:${m}:${s}`;
  
}
setInterval('nowTime()', 1000); // 1行ごとに実行

<script>

実行結果

曜日まで必要な場合は、以下のコードで取得可能です。

function zero( num) {
  if (num < 10)  num = "0" + num   
  return num;
}

function nowTime() {
  const date = new Date(); //現在日時
  
  const h = zero( date.getHours() );   //時
  const m = zero( date.getMinutes() ); //分
  const s = zero( date.getSeconds() ); //秒

  let weekday = new Array(7);
  weekday[0] = "日";
  weekday[1] = "月";
  weekday[2] = "火";
  weekday[3] = "水";
  weekday[4] = "木";
  weekday[5] = "金";
  weekday[6] = "土";

  let n = weekday[date.getDay()];

  const now = `${h}:${m}:${s} (${n})`;

  document.getElementById("sample").innerHTML = now;
  
}
setInterval('nowTime()', 1000);

実行結果

サンプルコード

以下は、
時間と分を表示した時計を作成するサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

三項演算子を使ってif文を1行で書く

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<script>

  const zero = (num) => (num < 10) ? num = "0" + num : num

  const nowTime = () => {

    const date = new Date(); //現在日時

    const h = zero(date.getHours());   //時
    const m = zero(date.getMinutes()); //分
    const s = zero( date.getSeconds() );

    hour.innerHTML = h;
    min.innerHTML = m;

  }

  setInterval('nowTime()', 1000);

</script>

<body>
  <div class="container mx-auto my-56 w-128 px-4">

    <div id="sample" class="flex flex-col justify-center">


      <div class="min-h-screen flex justify-center items-center bg-gradient-to-br from-lime-500 to-lime-800">
        
        <div
          class="relative border-8 border-white-100 rounded shadow-2xl font-mono text-9xl text-white grid grid-cols-2 gap-x-px">

          
          <div class="relative bg-black p-8">
          
            <div class="absolute inset-0 grid grid-rows-2">
              <div class="bg-gradient-to-br from-gray-800 to-black"></div>
              <div class="bg-gradient-to-br from-gray-700 to-black"></div>
            </div>
          
            <span id="hour" class="relative"></span>

            <div class="absolute inset-0 flex items-center">
              <div class="h-px w-full bg-black"></div>
            </div>
            
          </div>

          <div class="relative bg-black p-8">

            <div class="absolute inset-0 grid grid-rows-2">
              <div class="bg-gradient-to-br from-gray-800 to-black"></div>
              <div class="bg-gradient-to-br from-gray-700 to-black"></div>
            </div>

            <span id="min" class="relative"></span>

            <div class="absolute inset-0 flex items-center">
              <div class="h-px w-full bg-black"></div>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>
</body>

</html>

実行結果を確認すると、カンマ付きで表示されていることが確認できます。