0

私はこれを数時間見てきましたが、ボタンが押されたときにコードがタイマーのカウントダウンを開始しない理由がわかりません。どんな助けでも大歓迎です、ありがとう！

HTML

<div id="timerHours">00</div>
<div id="timerMins">00</div>
<div id="timerSecs">00</div>
<input type="button" value="Start" onclick="startTimer()"/>

JavaScript

var t;
var timerDefault = new Date();
timerDefault.setHours(0, 0, 0);

function setTimer(){
    var element = document.getElementById("timerHours");
    hours = parseFloat(element.innerHTML);
    element = document.getElementById("timerMins");
    minutes = parseFloat(element.innerHTML);
    element = document.getElementById("timerSecs");
    seconds = parseFloat(element.innerHTML);
    timerDefault.setHours(hours, minutes, seconds);
}

function startTimer() {
    setTimer();
    var h = timerDefault.getHours();
    var m = timerDefault.getMinutes();
    var s = timerDefault.getSeconds();
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    document.getElementById("timerHours").innerHTML = h;
    document.getElementById("timerMins").innerHTML = m;
    document.getElementById("timerSecs").innerHTML = s;
    timerDefault.setSeconds(timerDefault.getSeconds() - 1);
    if (h == 0 && m == 0 && s == 0) clearTimeout(t)
    t = setTimeout(startTimer, 1000);
}
4

2 に答える 2

1

「startTimer()」ルーチンは常に「setTimer()」を呼び出します。これは、HTML 要素のコンテンツに基づいてその Date オブジェクトを (再) 初期化します。次に、ルーチンは秒を 1 戻しますが、HTML を更新することはありません。したがって、次にタイマーがオフになると、Date インスタンス (「timerDefault」) は 00:00:00 にリセットされます。

于 2012-07-20T23:37:05.853 に答える
0

コードにいくつかの変更を加えると、カウントダウンが少し表示されます。

<div id="timerHours">00</div>
<div id="timerMins">00</div>
<div id="timerSecs">50</div>
<input type="button" value="Start" onclick="startTimer()"/>


var t;
var timerDefault = new Date();
timerDefault.setHours(0, 0, 0);

function setTimer(){
    var element = document.getElementById("timerHours");
    hours = parseFloat(element.innerHTML);
    element = document.getElementById("timerMins");
    minutes = parseFloat(element.innerHTML);
    element = document.getElementById("timerSecs");
    seconds = parseFloat(element.innerHTML);
    timerDefault.setHours(hours, minutes, seconds);
}

function startTimer() {
    setTimer();
    timerDefault.setSeconds(timerDefault.getSeconds() - 1);
    var h = timerDefault.getHours();
    var m = timerDefault.getMinutes();
    var s = timerDefault.getSeconds();
    console.log("Hi! " + h + " " + m + " " + s);
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    document.getElementById("timerHours").innerHTML = h;
    document.getElementById("timerMins").innerHTML = m;
    document.getElementById("timerSecs").innerHTML = s;
    if (h == 0 && m == 0 && s == 0) clearTimeout(t)
    t = setTimeout(startTimer, 1000);
}
于 2012-07-20T23:54:04.600 に答える