編程一個計時器

所以，我想創建一個計時器，這是我到目前爲止的代碼。編程一個計時器

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 

 
    <title>WIP</title> 
 
    <meta charset="UFT-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
    <script> 
 
    function timerCreate(minutes, seconds) { 
 
     var i = 0; 
 
     var f = 0; 
 
     $("#timerText").text((minutes - f) + ":" + (seconds - i)); 
 
     i++; 
 
     do { 
 
     interval = setInterval(function() { 
 
      $("#timerText").text((minutes - f) + ":" + (seconds - i)); 
 
      i++; 
 
      if (i >= seconds) { 
 
      clearInterval(interval); 
 
      setTimeout(function() { 
 
       $("#timerText").text((minutes - f) + ":" + "0"); 
 
      }, 1000); 
 
      if (minutes > 0) { 
 
       f++; 
 
      } 
 
      } 
 
     }, 1000); 
 
     } while (!(f = minutes)); 
 
    } 
 
    </script> 
 

 
</head> 
 

 
<body onload='timerCreate(5, 4)'> 
 

 
    <div id="timerText">Timer</div> 
 

 
</body> 
 

 
</html>

請運行該代碼，看看會發生什麼。我不明白爲什麼會這樣做。誰能幫忙？而且，儘管我最終得到了它，但我覺得這個代碼對我來說似乎太過分了。如果你同意，我會很感激你能否把我連接到一些定時器的代碼。無論哪種方式，如果你能向我解釋我做錯了什麼，我真的很喜歡它。

非常感謝任何回答的人。 :-)

來源

2015-09-08 Joca Pinto

你想對你的代碼重新排列或可你用一些類似的代碼，例如這一個：http://stackoverflow.com/questions/532553/javascript-countdown –

我認爲這是很好，謝謝。 –

你是不是指'while（！（f == minutes））'而不是'while（！（f = minutes））'？ – HPierce

這顯然是一個遞歸函數的工作。首先你需要timerCreate（5，4）。
接下來會發生什麼，是1秒後你可以調用timerCreate（5，3）。
所以很明顯讓函數調用自己（=遞歸函數），每次少於1秒。

注意模運算符％與/運算符。做了什麼，告訴你做了分區後剩下的事情。

例如：

91/60 = 1 + 31/60 
Math.floor(91/60) = 1; 
91%60 = 31;

所以劃分和地板爲您分鐘;模數給你幾秒鐘。

這是我剛纔寫的，基於我對這個問題的第一本能（不看別的計時器;顯然有很多計時器可以在網上找到）。

<input id="m" placeholder="minutes" value="1"> 
<input id="s" placeholder="seconds" value="17"> 
<input type="button" value="Start" onclick="startTimer()"> 
<input type="button" value="Stop" onclick="stopTimer()"> 
<hr> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
var timer; 
function displayTimer(m, s) { 
    $('#m').val(m); 
    $('#s').val(s); 
} 

function stopTimer() { 
    clearTimeout(timer); 
} 

function startTimer() { 
    var m = Number($('#m').val()); 
    var s = Number($('#s').val()); 
    timerClick(m, s); 
} 

function finishTimer() { 
    alert('finished!'); 
} 

function timerClick(m, s) { 
    // convert into seconds 
    var seconds = 60*m + s; 
    // display timer, unless the timer has been set off 
    if(timer) { 
    displayTimer(m, s); 
    } 
    if (m == 0 && s == 0) { 
    finishTimer(); 
    return true; 
    } 
    // remove one second 
    seconds--; 
    // call this function again 
    timer = setTimeout(function() { 
     timerClick(Math.floor(seconds/60), seconds % 60); 
    }, 
    1000 
); 
} 
</script>

來源

2015-09-08 14:08:29

Emmanuel，請嘗試解釋你在新代碼中做了什麼。沒有任何解釋你的答案不是很有幫助。 – Exelian

你有一個點 –

儘管我喜歡你的解決方案，但它顯然在每次迭代中都有一些延遲。 – skubski

下面是一個例子代碼：

HTML：

<div id="timerText">Timer</div>

JavaScript代碼：

var timerElement = $('#timerText'); 

function timerCreate(minutes, seconds) { 
    var finalTimerTime = getFinalTime(minutes, seconds); 

    // starts run timer every second and gets handler to the timer, so it can be stopped when time gets 
    // final time 
    var timer = setInterval(function() { 
     var currentTime = new Date(); 
     if (currentTime > finalTimerTime) { 
      clearInterval(timer); 
      console.log('Done'); 
     } else { 
      printTimer(new Date(finalTimerTime - currentTime)); 
     } 
    }, 1000); 

    printTimer(new Date(finalTimerTime - new Date())); 
} 

// prints timer valud 
function printTimer(finalTimerTime) { 
    timerElement.text(finalTimerTime.getMinutes().timePadding() + ' : ' + finalTimerTime.getSeconds().timePadding()); 
} 

// adds leading prefix for presenting time in '0X' format 
Number.prototype.timePadding = function() { 
    return this < 10 ? '0' + this : this; 
} 

// gets final time of the timer 
function getFinalTime(minutes, seconds) { 
    var finalTimerTime = new Date(); 
    finalTimerTime.setMinutes(finalTimerTime.getMinutes() + minutes); 
    finalTimerTime.setSeconds(finalTimerTime.getSeconds() + seconds); 

    return finalTimerTime; 
} 

// starts timer 
$(function() { 
    timerCreate(5, 4); 
});

Here is an working example of the code

來源

2015-09-08 14:51:06

這很有創意，但時間看起來有點奇怪，因爲'finalTimerTime.getSeconds（）'以'9'而不是'09'返回。從而使輸出爲'1：9'。 – HPierce

@Hierier。我加了timePadding函數來處理前導'0'。 –

編程一個計時器

回答

相關問題