はじめに

今回は自分で入力した秒数を時間、分、秒表記に直してカウントダウン・カウントアップさせる方法を書いていきます。

ページづくり

まずHTMLで基本の形を作っていきます。CSSがめんどくさいので外部から読み込みます(materialize)

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>

土台

次にタイムを動かすため、土台を作ります。

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を使ってカウントを行っていきます。

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のみだと、

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だけだと

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>

となります

全体コード

カウントダウン

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>

カウントアップ

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>

感想

自分もまだ勉強中の身なので、もっと効率がいいやり方もあるかもしれません。
ぜひ参考にしていただけるとありがたいです。

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

はじめに

ページづくり

土台

JavaScriptを使ったカウントダウン

カウントアップ

全体コード

感想