HTML+JavaScriptを使ってカウントダウン・カウントアップをつくってみた

# はじめに
今回は自分で入力した秒数を時間、分、秒表記に直してカウントダウン・カウントアップさせる方法を書いていきます。
# ページづくり
まずHTMLで基本の形を作っていきます。CSSがめんどくさいので外部から読み込みます(materialize)
~~~ html:time.html

<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="UTF-8">
<title>Time</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>

</body>
<script>

</script>
</html>
~~~
# 土台

次にタイムを動かすため、土台を作ります。
~~~ html:time.html
<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="UTF-8">
<title>Time</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="green">
 <h2>残り<span id="hour" class="yellow-text">時間</span><span id="min" class="yellow-text">分</span><span id="sec" class="yellow-text">秒</span></h2>
<div id="date">date</div>
</body>
<script>

</script>
</html>
~~~
`class="green"`や`class=yellow-text`で外部CSSのクラスを呼び出し、色をつけています。
`<span>`タグを使って、IDとクラスをつけています。ここでつけたIDはJavaScriptでのカウントのときに使います。また日時を表示させたいので`<div id="date">date</div>`で基礎を作っておきます。
# JavaScriptを使ったカウントダウン
続いて、JavaScriptを使ってカウントを行っていきます。
~~~ html:time.html
<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="UTF-8">
<title>Time</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="green">
 <h2>残り<span id="hour" class="yellow-text">時間</span><span id="min" class="yellow-text">分</span><span id="sec" class="yellow-text">秒</span></h2>
</body>
<script>
          var sec = prompt("Time(Second)");
          let t = sec;
setInterval(() => {
        document.getElementById("time").textContent = new Date();
          },1)   
setInterval(() => {
           
            var hour = $("#hour").text(Math.floor(t / 3600) + "時間");
            var min = $("#min").text(Math.floor((t % 3600) / 60) + "分");
            var sec = $("#sec").text(Math.floor(t % 60) + "秒");
            t = t - 1;
          },1000)
   
</script>
</html>
~~~
JavaScriptのみだと、
~~~html:time.html
<script> 
 var sec = prompt("Time(Second)");
          let t = sec;
setInterval(() => {
        document.getElementById("time").textContent = new Date();
          },1)  
setInterval(() => {
            var hour = $("#hour").text(Math.floor(t / 3600) + "時間");
            var min = $("#min").text(Math.floor((t % 3600) / 60) + "分");
            var sec = $("#sec").text(Math.floor(t % 60) + "秒");
            t = t - 1;
            
          },1000)
</script>          
~~~
`setInterval`は指定した秒間、間を空けて反復で実行する関数で、
それを使って毎秒`t`から1秒引くようにしています。また計算を使って、
時間・分・秒に直して表示しています。
# カウントアップ
カウントアップは、JavaScriptの`t = t -1;`の部分を`t = t +1`に書き換えますその後、`prompt`を消して、`let time = 0;`に書き換えます。
JavaScriptだけだと
~~~ html:time.html
<script>          
let t = 0;
setInterval(() => {
        document.getElementById("time").textContent = new Date();
          },1)  
setInterval(() => {
            var hour = $("#hour").text(Math.floor(t / 3600) + "時間");
            var min = $("#min").text(Math.floor((t % 3600) / 60) + "分");
            var sec = $("#sec").text(Math.floor(t % 60) + "秒");
            t = t + 1;
            
          },1000)
</script>  
~~~
となります
# 全体コード
カウントダウン
~~~html:time.html
<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="UTF-8">
<title>Time</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="green">
 <h2>残り<span id="hour" class="yellow-text">時間</span><span id="min" class="yellow-text">分</span><span id="sec" class="yellow-text">秒</span></h2>
</body>
<script>
          var sec = prompt("Time(Second)");
          let t = sec;
setInterval(() => {
        document.getElementById("time").textContent = new Date();
          },1)   
setInterval(() => {
           
            var hour = $("#hour").text(Math.floor(t / 3600) + "時間");
            var min = $("#min").text(Math.floor((t % 3600) / 60) + "分");
            var sec = $("#sec").text(Math.floor(t % 60) + "秒");
            t = t - 1;
          },1000)
   
</script>
</html>
~~~
カウントアップ
~~~html:time.html
<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="UTF-8">
<title>Time</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="green">
 <h2>残り<span id="hour" class="yellow-text">時間</span><span id="min" class="yellow-text">分</span><span id="sec" class="yellow-text">秒</span></h2>
</body>
<script>
          let t = 0;
setInterval(() => {
        document.getElementById("time").textContent = new Date();
          },1)   
setInterval(() => {
           
            var hour = $("#hour").text(Math.floor(t / 3600) + "時間");
            var min = $("#min").text(Math.floor((t % 3600) / 60) + "分");
            var sec = $("#sec").text(Math.floor(t % 60) + "秒");
            t = t + 1;
          },1000)
   
</script>
</html>
~~~
# 感想
自分もまだ勉強中の身なので、もっと効率がいいやり方もあるかもしれません。
ぜひ参考にしていただけるとありがたいです。