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

デジタルチックな良い感じのタイマーを実装したので速攻で共有します。
成果物はこんな感じです。
<img width="243" alt="スクリーンショット 2020-01-17 20.47.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254495/f9dd3a66-e04b-c63f-4ba1-f452155a5d95.png">
コードはこんな感じ。
なお、スタイリングには **Bootstrap4&CSS** を使用しています。
[bootstrap4 download](https://getbootstrap.com/docs/4.0/getting-started/download/
)

```html: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

```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

```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フォント](https://fontmeme.com/jfont/digital-7-font/)を使用しています。
[Digital 7フォント](https://fontmeme.com/jfont/digital-7-font/)から任意のファイルをダウンロードしてhtmlファイル内で読み込んであげてください。