<div class="wrap">

 <h1 id="msg"></h1>
 <p id="countdown"></p>

</div>
.wrap { text-align: center; color: #777; }
#countdown span {
 font-size: 2.4em;
 font-weight: bold;
 color: #333;
}
// Set the date we're counting down to
var countDownDate = new Date("Jul 24, 2021 20:00:00").getTime();
var endDate = new Date("Aug 9, 2021 23:00:00").getTime();
var beforeTitle = "Go! TOKYO";
var beforeMsg = "開会式まで あと <span>";
var title = "Welcome! to TOKYO";
var msg = "TOKYO2021 開催!";
var afterTitle = "Thanks! TOKYO";
var afterMsg = "TOKYO2021 終了。";
document.getElementById("msg").innerHTML = beforeTitle;
// Update the count down every 1 second
var x = setInterval(function() {
 // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var term = countDownDate - now;
  var limit = false;
 if(endDate < now){ limit = true; }

  // Time calculations for days, hours, minutes and seconds
  var dd = Math.floor(term / (1000 * 60 * 60 * 24));
  var hh = Math.floor((term % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var mm = Math.floor((term % (1000 * 60 * 60)) / (1000 * 60));
  var ss = Math.floor((term % (1000 * 60)) / 1000);
 hh = ("0"+hh).slice(-2);
 mm = ("0"+mm).slice(-2);
 ss = ("0"+ss).slice(-2);
  // Display the result in the element with id="countdown"
 document.getElementById("countdown").innerHTML = beforeMsg + dd + "</span>日 <span>" + hh + "</span>時間 <span>" + mm + "</span>分 <span>" + ss + "</span>秒 ";

  // If the count down is finished, write some text 
  if (term < 0) {
   clearInterval(x);
   if(limit){
    document.getElementById("msg").innerHTML = afterTitle;
    document.getElementById("countdown").innerHTML = afterMsg;
   } else {
    document.getElementById("msg").innerHTML = title;
    document.getElementById("countdown").innerHTML = msg;
   }
  }
}, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.