javascript デジタルなカウントダウンタイマー

デジタルチックな良い感じのタイマーを実装したので速攻で共有します。
成果物はこんな感じです。

コードはこんな感じ。
なお、スタイリングには Bootstrap4&CSS を使用しています。
bootstrap4 download

index.html

 /* 画面の右下に配置 */
<div class="" style="position:fixed;bottom:-30px;right: -100px;z-index:100;width: 17em">
        <main>
            <!-- 時計 -->
            <div class="clock text-center">
                <!-- 時間 -->
                <div class="numbers">
                    <p class="hours mb-0"></p>
                    <p class="placeholder mb-0">88</p>
                </div>
    
                <div class="colon">
                    <p class="mb-0">:</p>
                </div>
    
                <!-- 分 -->
                <div class="numbers">
                    <p class="minutes mb-0"></p>
                    <p class="placeholder mb-0">88</p>
                </div>
    
                <div class="colon">
                    <p class="mb-0">:</p>
                </div>
    
                <!-- 秒 -->
                <div class="numbers">
                    <p class="seconds mb-0"></p>
                    <p class="placeholder mb-0">88</p>
                </div>
            </div>
　　　　　　　　<!-- タイマーを止めるボタン(機能は実装しません) -->
            <div class="text-center">
                <button type="button" class="btn btn-light font-weight-bold my-0 px-5" >タイマーを止める</button>
            </div>
        </main>
    </div>

お次にcss

style.css

* {
	margin: 0;
	padding: 0;
}
main {
	color: #ffffff;
	background-color: #000000;
	font-family: 'digital-7', sans-serif;
}
main {
    transform: translate(-50%,-50%);
    padding: 15px;
    border: solid 5px #ffffff;
}

div.days {
	margin: 0 auto;
	color: #131212;
}

div.days .day {
	display: inline-block;
}

div.days .day p {
	font-size: 12px;
	font-weight: bold;
	font-family: sans-serif;
	text-transform: uppercase;
}

div.clock div{
	display: inline-block;
	position: relative;
}

div.clock div p{
	font-size: 30px;
	position: relative;
	z-index: 100;
}

div.clock .placeholder {
	color: #131212;
	position: absolute;
	top: 0;
	z-index: 50;
}

.light-on {
	color: #ffffff;
}

からのjavascript

index.js

// 9:00:00 -> 09:00:00 って一桁の数値の場合に0を付与してあげる関数
function addZero (val){
	return (val <= 9) ? ("0" + val) : val;
}

const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Nov 10, 2020 00:00:00').getTime(),
    hoge = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

        document.getElementsByClassName('hours')[0].innerText = addZero(Math.floor((distance % (day)) / (hour))),
    　　 document.getElementsByClassName('minutes')[0].innerText = addZero(Math.floor((distance % (hour)) / (minute))),
    　　 document.getElementsByClassName('seconds')[0].innerText = addZero(Math.floor((distance % (minute)) / (second)));
      
      // 時間が0以下になった時の処理
      if (distance < 0) {
        clearInterval(hoge);
      }

    }, second)

デジタルチックなフォント表現をするために Digital 7フォントを使用しています。
Digital 7フォントから任意のファイルをダウンロードしてhtmlファイル内で読み込んであげてください。