JavaScript：不僅僅是一個倒計時/ countup腳本

Question

我真的很希望這裏的某個人可以幫助我解決這個問題......儘管解釋我正在尋找的東西有點複雜。

基本上我正在尋找一個「倒計時/ countup」javascript - 聽起來很直截了當，對吧？

我發現了很多這種腳本的變體，但它們都不符合以下要求。

我特別需要的是一個腳本，在頁面加載時從36000秒開始倒計時。當達到0秒時。立即開始數回36000秒。

同時，我有這兩個div的它應該既影響，並通過腳本來實現：

<style> 
.indicator { 
width: 20px; 
height: 8px; 
} 
</style> 

<div class="percent">100%</div> 
<div class="indicator"></div> 

正如你所看到的，第一個div的innerHTML開始時爲100％，並應減少當劇本每360秒計算一次時減1。 （例如：計數過去的第三千六百秒時。的innerHTML應爲90％）

第二div有20像素的寬度應由1px的減小當腳本已經計數過去每第一千八百秒。 （例如：計數過去的第三千六百秒時。寬度應18像素）

• 36000秒。 = 100％= 20px
• 18000秒= 50％= 10px
• 3600秒。 = 10％= 2px
• 1800秒。 = 5％= 1px
• 360秒。 = 1％= 0px

如前所述，當腳本達到0秒時應該開始向上計數。 發生這種情況時，第二個div的className應該從指標更改爲，收取，第一個div的innerHTML應根據sec的過去時間適當增加。 （正如當劇本向下計數時）

但是，當countup達到36000th秒。它不應該只是開始倒計數，而是暫停並將第二個div的className從改爲改爲，收取。 不用說，第一個div的innerHTML應該是100％。 從這裏開始，如果第二個div被點擊，腳本纔會開始倒計時，在這種情況下，第二個div的className應該從變爲，然後回到指標。

此外，只要第二個div被點擊，同時改變它的className，倒數/ countup就會被反轉。

• 倒計時：<div class="indicator"></div>
• COUNTUP：<div class="charging"></div>

我爲長的解釋和我那可憐的英語語法道歉......

希望有人能夠讓SENCE這個:)

Answer 1

爲什麼不使用類似於每10秒調用一次的定時器（因爲你的改變點mod 10 = 0），並檢查一個變量是否處於這些值之一。例如類似的：

var totalTime = 36000; 
var timeLeft = totalTime; 

setInterval(countdown, 10000); 

function countdown() 
{ 
    timeLeft -= 10; 

    //Change innerhtml to timeLeft/totalTime * 100 + "%"; 
} 

這應該讓你開始至少我想。您可能會使用setTimeout，但最終可以結束遞減，並開始遞增。

http://www.w3schools.com/js/js_timing.asp

Answer 2

下面是新的代碼。它似乎是工作，但它使用100秒，由於某種原因，ID點擊不工作了。你應該能夠弄清楚你的具體秒針設置。這裏是一個演示：http://jsfiddle.net/6anju/7/

$(document).ready(function(){ 
    count_down(); //<-- When the page loads 

    $('.indicator').click(function() { 
     /** This works.. Just make sure you change the ID's properly **/ 
    }); 

    //* Not working correctly. jQuery version type correct? *// 
    $('#charging').click(function() { 
     // Change ID back: 
     var change_id = document.getElementById('charging'); 
     change_id.id = "indicator"; 
     count_down(); 
    }); 

    $('#charged').click(function() { 
     // Change ID back: 
     var change_id = document.getElementById('charged'); 
     change_id.id = "indicator"; 
     count_down(); 
    }); 

}); 

function count_down() { 

    var counter = 100000; // 100 seconds 
    var change_width_every = 5; // Change every 5 seconds 
    var current_width = 20; // Current width in px 
    var current_percent = 100; // Current percent 

    // Count down and run every 1 second 
    var count_down = setInterval(function() { 

     counter = counter - 1000; // Take a second away 
     current_percent--; // Take away 1 percent 
     change_width_every--; // Take away 1 from the 5 seconds befor width change 
     document.getElementById('percent').innerHTML = current_percent + "%"; // Edit the percent div 

     if (change_width_every <= 0) { // If we exhaust our 5 
      current_width--; // Edit your current width integer 
      document.getElementById('indicator').style.width = current_width + "px"; // update the battery 
      change_width_every = 5; // reinitialize 
     } 

     if (counter <= 0) { 
      clearInterval(count_down); // kill the counter 
      count_up(); // start counting up 
     } 

    }, 1000); 
} 

function count_up() { 

    var counter = 0; 
    var change_width_every = 5 
    var current_width = 0; 
    var current_percent = 0; 
    // change the id to charging: 
    var change_id = document.getElementById('indicator'); 
    change_id.id = 'charging'; 

    var counting = setInterval(function() { 

     counter = counter + 1000; 
     current_percent++; 
     change_width_every--; 
     document.getElementById('percent').innerHTML = current_percent + "%"; 

     if (change_width_every <= 0) { 
      current_width++; 
      document.getElementById('charging').style.width = current_width + "px"; 
      change_width_every = 5 // reinitialize 
     } 

     if (counter >= 100000) { 
      change_id = document.getElementById('charging'); 
      change_id.id = "charged"; 
      clearInterval(counting); 
     } 

    }, 1000); 

}