带有 Twitter Bootstrap 进度条的 Javascript 倒计时

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="//getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>

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