Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Atsu1209jp(Atsu1209)

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

Posted at

はじめに

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

ページづくり

まず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>

感想

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

2
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?