Javascript倒计时与Twitter启动进度条

Javascript Countdown with Twitter Bootstrap Progress Bar

本文关键字：启动 Twitter 倒计时 Javascript      更新时间：2023-09-26

我正在使用Twitter引导程序。我需要在30秒后重定向页面。我想使用Twitter引导进度条来指示页面重定向的时间（因此，当进度条为100%时，页面会重定向）。请有人帮我用Javascript和HTML代码来做这件事。

谢谢；）

非常基本的例子：

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>

相关文章：