三秒でダウン、アップのカウントを表示する

3秒
<!DOCTYPE html>
<html>
<head>
  <title>ダウン・アップ カウンター</title>
  <style>
    .counter {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>三秒でダウン、アップのカウントを表示する</h1>
  <div class="counter">
    <span id="count">3</span>秒
  </div>

  <script>
    // カウントダウンの開始
    var count = 3;
    var countdown = setInterval(function() {
      count--;
      document.getElementById("count").textContent = count;

      if (count === 0) {
        clearInterval(countdown);
        document.getElementById("count").textContent = "Go!";
      }
    }, 1000);

    // カウントダウン終了時の処理
    setTimeout(function() {
      document.getElementById("count").textContent = "ダウン!";
    }, 3000);

    // カウントアップの開始
    setTimeout(function() {
      var count = 1;
      setInterval(function() {
        document.getElementById("count").textContent = count;
        count++;
      }, 1000);
    }, 4000);
  </script>
</body>
</html>

ジョーク: ダウンとアップのカウントを表示するアプリなので、重力やエレベーターのジョークを追加すると面白いかもしれません。例えば、「三秒でダウン、アップのカウントを表示するアプリです。ちなみに、重力の影響で逆さまに置いても問題ありませんが、エレベーターに乗ってると途中でカウントが止まるかもしれません！」といった感じです。