簡單的jQuery計數器定時器幫助請

試圖在jQuery中做一個簡單的向上計時器......這種工作，但將數字添加到「0000」的末尾，我希望它去'0001' '0002' '0003'等...簡單的jQuery計數器定時器幫助請

這一切都發生在jQuery onReady範圍內。

var i = '0000' 
var timer = function doSomething () 
{ 
    i = i+= 1 
    $('.counter').text(i); 
    console.log(i); 

} 
setInterval (timer, 1000);

來源

2012-02-13 Michael Kaufman

建議：1.使用分號結束您的行。它們是可選的，但不是真的（閱讀Javascript爲什麼好的部分）2.始終把你的大括號放在同一行。這不是一種風格的東西，在一個新的線上的括號可能會導致怪異的錯誤。 3.你的函數目前有兩個名字，只用一個 - 你可以執行'function（）{...'3.你每次掃描整個文檔爲'$（。counter）'，你應該把它存儲在變量，以便您不必掃描。 – 2012-02-13 21:27:11

@GeorgeMauer瞭解換行符*不會結束語句的情況比始終盲目地使用分號更重要，因爲即使是使用分號的用戶仍然會包含一些跨越多行的語句。在這些情況下，在末尾添加分號不會節省您的時間。請參閱[這篇文章]（http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding） – benekastah 2012-02-13 21:53:22

斷行和分號的細節不是我的正在這裏，但我很欣賞這個建議。 – 2012-02-14 01:41:46

您當前的代碼附加到字符串，而不是附加到數字。它本質上看起來像

i = '0000' + 1, i = '00001' + 1, i = '000011' + 1 ...

等等。你需要保持它的整數基於繼續添加到數字。這是一個格式化的例子，它看起來像你想要的。

var pad = function(n) { return (''+n).length<4?pad('0'+n):n; }; 

jQuery.fn.timer = function() { 
    var t = this, i = 0; 
    setInterval(function() { 
     t.text(pad(i++)); 
    }, 1000); 
}; 

$('#timer').timer();

http://jsfiddle.net/jDaTK/

來源

2012-02-13 21:30:21 Robert

您的「我」變量需要是一個整數。您可以將其格式化爲想要在某處打印的格式。

$(document).ready(function() { 
    var i = 0; 
    var target = $('.counter'); 
    var timer = function doSomething () 
    { 
     i++; 

     var output = pad(i,4); 
     target.text(output); 
     console.log(output); 

    } 
    setInterval (timer, 1000); 
}); 


    function pad(number, length) { 

     var str = '' + number; 
     while (str.length < length) { 
      str = '0' + str; 
     } 
     return str; 

    }

來源

2012-02-13 21:23:36

這其實很優雅。非常感謝你給我看。這是每次更新時都掃描整個文檔，尋找'counter'div嗎？ – 2012-02-14 08:04:14

是的。一般來說，除非您真的遇到它們，否則我不會太擔心性能問題。如果你想避免這種情況，你可以將jquery選擇器存儲在這樣的變量中（確保在定時器函數外部）：var target = $（'。counter'）;那麼你可以說target.text（輸出）來更新它。我編輯了代碼來展示這一點。 – 2012-02-14 15:02:15

我會做更多的事情是這樣的：

// Make sure Date.now exists in your environment 
Date.now = Date.now || function() { return Number(new Date()); }; 

var time = 0, 
start = Date.now(), 
intervalId; 

intervalId = setInterval(function() { 
    var seconds, display; 
    // get the exact time since the timer was started 
    time = Date.now() - start; 
    // get the number or seconds, rounded down 
    seconds = Math.floor(time/1000); 
    display = '' + seconds; 

    // pad the beginning of your display string with zeros 
    while (display.length < 4) { 
    display = "0" + display; 
    } 
    console.log(display); 
}, 100);

setInterval並不確切。這段代碼可以確保當顯示器可以達到近一秒（理論上）時，您所追蹤的實際時間始終是自您啓動計時器以來經過的確切時間量。但是這個代碼每十分之一秒就會更新一次顯示，所以它幾乎不會超過幾毫秒。

從這裏你可以找出更聰明的方式來更新顯示屏，以確保你具有所需的準確性水平。如果這需要非常準確，那麼你可以確保你顯示到第二個十分之一。

來源

2012-02-13 21:43:51 benekastah

這工作（並非常感謝你），但感覺很奇怪。爲什麼我們需要填充任何東西。我們不能取0000的有效數字併爲0001添加一個數字嗎？沒有使這部分字符串？ – 2012-02-14 01:49:49

數字'0000'只是'0'，所以如果你想要前導零，'0000'應該是一個字符串。 ''0000'+ 1'只是在字符串末尾附加'1'，給你'00001'。然而，'1 + 1'給你'2'，這是正確的值，但它不顯示前導零。解決方法是將數值計算爲數字，然後將其顯示爲字符串。在這個解決方案中，該值將被轉換爲一個字符串，然後在起始處附加零，直到字符串的長度爲4.在這一點上，您將得到適當的值以及適當數量的前導零。 – benekastah 2012-02-14 02:38:11

我真的推薦jQuery CountUp插件。我嘗試了一些Javascript計數器，這是最容易實現的一個，並帶有許多好東西：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#counter').countUp({ 
      'lang':'en', 'format':'full', 'sinceDate': '22/07/2008-00::00'; 
     }); 
    }); 
</script>   

<div id="counter"></div>

來源

2012-08-15 00:16:59 kaleazy

嘿，鏈接不工作。它扔404！錯誤。 – 2015-12-20 01:43:38

簡單的jQuery計數器定時器幫助請

回答

相關問題