Javascript Countdown with Twitter Bootstrap進度條

Question

我正在使用Twitter Bootstrap。我需要在30秒後重定向頁面。我想使用Twitter Bootstrap進度條來指示頁面重定向到多長時間（因此當頁面處於100％時，頁面會重定向）。請有人可以幫我用Javascript和HTML代碼來做到這一點。

感謝）

Answer 1

非常基本的例子：

var bar = document.getElementById('progress'), 
    time = 0, max = 5, 
    int = setInterval(function() { 
     bar.style.width = Math.floor(100 * time++/max) + '%'; 
     time - 1 == max && clearInterval(int); 
    }, 1000); 

代碼包裹在功能：

function countdown(callback) { 
 
    var bar = document.getElementById('progress'), 
 
    time = 0, max = 5, 
 
    int = setInterval(function() { 
 
     bar.style.width = Math.floor(100 * time++/max) + '%'; 
 
     if (time - 1 == max) { 
 
      clearInterval(int); 
 
      // 600ms - width animation time 
 
      callback && setTimeout(callback, 600); 
 
     } 
 
    }, 1000); 
 
} 
 

 
countdown(function() { 
 
    alert('Redirect'); 
 
});

body {padding: 50px;}

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> 
 

 
<div class="progress"> 
 
    <div class="bar" id="progress"></div> 
 
</div>