Go to Qiita Advent Calendar 2024 Top
LoginSignup
limemint
@limemint (斉藤 貴博)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

カウントダウンタイマーについて

Q&A

HTMLJavaScript

解決したいこと

カウントダウンタイマーを作成したいと思っています。
例えば、「5分」（＝05:00）と表示はさせても、その裏では「300秒」から1秒ずつ時間は減っているわけですが、それをどのように表示させたらいいのかわかりません。
コードで言ったら
let countBase = 0;
と定義しているのですが、これをどのようにhtmlのbodyタグ内の「00:00」とつなげたらいいのでしょうか？
アドバイスをお願いします。

コードはだいぶ冗長になってしまっていて、経験を積まれている皆様には見にくいと思われますが、私はやっとこれくらいなら理解できるレベルなのでご了承下さい。

該当するソースコード

ソースコードを入力
```<!DOCTYPE html>
<html>
    <head>
        <title>タイマー</title>
        <meta name="description" content="タイマーアプリ">
        <meta charset="utf-8">
        <body>
            <h1><span id="the timer">00:00</span></h1>
            <script src="js/timer.js"></script>
            <form>
                <input type="button" id="number1" value="1" onclick="btnOneClick();">
                <input type="button" id="number2" value="2" onclick="btnTwoClick();">
                <input type="button" id="number3" value="3" onclick="btnThreeClick();"><br>
                <input type="button" id="number4" value="4" onclick="btnFourClick();">
                <input type="button" id="number5" value="5" onclick="btnFiveClick();">
                <input type="button" id="number6" value="6" onclick="btnSixClick();"><br>
                <input type="button" id="number7" value="7" onclick="btnSevenClick();">
                <input type="button" id="number8" value="8" onclick="btnEightClick();">
                <input type="button" id="number9" value="9" onclick="btnNineClick();"><br>
                <input type="button" id="number0" value="0" onclick="btnZeroClick();"><br>
                <input type="button" id="startBtn" value="START">
                <input type="button" id="stopBtn" value="STOP">
                <input type="button" id="resetBtn" value="RESET">                                   
            </form>
        </body>
    </head>
    </html>

let baseCount = 0;   //カウントダウンの数字を格納する変数
let min = 0;            //残り時間「分」を格納する変数
let sec = 0;           //残り時間「秒」を格納する変数
let stb = null;        //setInerval・clearInervalを制御する変数

// 1秒ごとにcount_down関数呼び出す
function count_start(){
  stb = setInterval(count_down,1000);
}
// カウントダウン表示
function count_down(){
  if(baseCount ===0){
    let display = document.getElementById('the timer');
    display.innerText = 'TIME UP';
  }else {
      baseCount--;
      min = parseInt(baseCount/60);
      sec = baseCount % 60;
      let count_down = document.getElementById('the timer');
      count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
    }
  }

// ストップボタンクリック時のアクション
const stopBtn = document.getElementById('stopBtn');
stopBtn.addEventListener('click', () => {
  clearTimeout(timeoutID);
  console.log("timer cancel");
});
// リセットボタンクリック時のアクション
function count_reset(){
  baseCount = 0000;
  min = parseInt(baseCount/60);
  sec = baseCount % 60;
  let count_down = document.getElementById('the timer');
  count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
}
// イベント処理を実行
window.addEventListener('DOMContentLoaded', function(){
  let start = document.getElementById('startBtn');
  let stop = document.getElementById('stopBtn');
  let reset = document.getElementById('resetBtn');
  start.addEventListener('click',count_start);
  stop.addEventListener('click',count_stop);
  reset.addEventListener('click',count_reset);
})
// 1押した時
function btnOneClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '1';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
// 2押した時
  function btnTwoClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '2';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
 // 3
  function btnThreeClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '3';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  // 4
  function btnFourClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '4';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  // 5
  function btnFiveClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '5';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  // 6
  function btnSixClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '6';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  // 7
  function btnSevenClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '7';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  //8
  function btnEightClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '8';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  // 9
  function btnNineClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '9';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
  // 0
  function btnZeroClick() {
    target = document.getElementById('the timer');
    const base = target.innerText.replace(':','');
    const newDisplay = base.substr(1,3)+ '0';
    const a = newDisplay.slice(0,2);
    const b = ':';
    const c = newDisplay.slice(2);
    let nnDisplay = a + b + c;
    console.log(nnDisplay);
    document.getElementById('the timer').textContent = nnDisplay;
    target.innerText = nnDisplay;
  };
例）

### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0

3Answer

shiracamus
@shiracamus

これをどのようにhtmlのbodyタグ内の「00:00」とつなげたらいいのでしょうか？

既に書いてありますよ。
baseCount更新時にもこれを行えばいいです。

  min = parseInt(baseCount/60);
  sec = baseCount % 60;
  let count_down = document.getElementById('the timer');
  count_down.innerText = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2)
0Like

Comments

  1. @limemint

    Questioner

    ありがとうございます。
    気が付きませんでした。
    アドバイスいただいたことを実践し再度トライしてみます。
YottyPG
@YottyPG

少し動かしてみました。
表示部分は問題なく動いていますが、現在表示されている時間からbaseCountを更新してあげる処理が必要です。

関数「count_start()」の最初にbaseCountを更新する処理を追加してあげればうまく動くと思います。

また、現状baseCountが0になってもcount_downが呼び続けられるようになっているので、0になったらsetIntervalを停止してあげた方が適切かと思われます。

0Like

Comments

  1. @limemint

    Questioner

    ありがとうございます。
    追加の情報までアドバイスくださって感謝いたします。
tokotoko33ok
@tokotoko33ok

違ったらすいません。１秒ごとに経過時間を表しています。

300 // １秒経過
299 // 1秒経過
298 // １秒経過

<script>
 
 var num = 300;

 function hikizan() {
    num = num-=1;
    document.time.time_box.value = num;
    val.innerHTML = num;
 }

 function timestrt() {
        //関数strt()を1000ミリ秒間隔で呼び出す
        setInterval("hikizan()", 1000);
}

//　ウィンドウ読み込み時 タイマー関数実行
window.onload = function () {
        timestrt();
}

</script>
0Like

Comments

  1. @limemint

    Questioner

    ありがとうございます。
    ぜひ組み込んでトライしてみます。

Your answer might help someone💌

LoginSign Up