0

カウントダウンタイマーを作るのに助けが必要です!

ユーザーがテキスト フィールドに値を入力すると、ボタンがクリックされるとタイマーが開始されます。

タイマー テキストは、ゼロになるまで 1 秒ごとに 1 ずつ減少します。

最初のステップのコードはありますが、2 番目のステップが機能しないようです。setTimeout とループを含める必要があることはわかっています。

これまでのコードは次のとおりです。

HTML-

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


</head>
<body>



<div id="form">

<h2> COUNTDOWN</h2>

    Seconds: <input type="text" name="seconds" id="seconds" /> <input type="button" value="Start!" id="start" /> <input type="button" value="Pause" id="pause"  />
</div>


<div id="info">


</div>


<div id="countdown">


</div>

<script src="script.js"></script>
</body>
</html>

JAVASCRIPT-

window.onload = function(){

var startButton = document.getElementById("start");

var form = document.getElementById("seconds");

var pause = document.getElementById("pause");

var secDiv = document.getElementById("countdown");

var editSec = document.createElement("h1");


startButton.onclick = function (){

editSec.innerHTML = form.value;
secDiv.appendChild(editSec);


};


};
4

4 に答える 4

1

ここに行きます：

var globalTime = form.value; //receive the timer from the form
var secDiv = document.getElementById("countdown");

function decreaseValue() {
  globalTime = globalTime - 1;

   secDiv.innerHTML = globalTime;
}

startButton.onclick = function (){
  setTimeout(decreasValue(),1000);
};

//clear out the timers once completed
于 2013-03-04T15:40:56.450 に答える
0

You need to use setInterval, not setTimeout. Add this code to the onclick function:

editSec.id = "editSec";
window.cdint = setInterval(function(){ 
    var origVal = parseInt(document.getElementById("editSec").innerHTML);
    document.getElementById("editSec").innerHTML = origVal - 1;
    if(origVal - 1 <= 0){
        window.cdint = clearInterval(window.cdint);
    }
}, 1000);
于 2013-03-04T15:37:10.097 に答える
0

setIntervalを使用する

var time = 100;
var countdown = function(){
    secdiv.innerHTML = time;
    time--;
}
setInterval(countdown,1000);
于 2013-03-04T15:37:44.107 に答える
0

必要に応じて使用できsetTimeoutます：

startButton.onclick = function () {
    var value = parseInt(form.value);
    editSec.innerHTML = value;
    secDiv.appendChild(editSec);
    setTimeout(function () {
        editSec.innerHTML = --value < 10
            ? '<span style="color:red">' + value + '</span>'
            : value;
        if (value) {
            setTimeout(arguments.callee, 1000);
        }
    }, 1000);
};
于 2013-03-04T15:51:33.860 に答える