使用Twitter Bootstrap进度条的Javascript倒计时 [英] Javascript Countdown with Twitter Bootstrap Progress Bar

问题描述

我正在使用Twitter Bootstrap。我需要在30秒后重定向页面。我想使用Twitter Bootstrap进度条来指示页面重定向到多长时间（因此当页面处于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 =http://getbootstrap.com/2.3.2/assets/css/bootstrap.css =stylesheet/>< div class =progress> < div class =barid =progress>< / div>< / div>

I am working with the Twitter Bootstrap. I need to redirect the page after 30 seconds. I want to use the Twitter Bootstrap Progress Bar to indicate how long till the page redirects (So the page redirects when the bar is at 100%). Please could someone help me with the Javascript and HTML code to do this.

Thanks ;)

解决方案

Very basic example:

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);

Code wrapped in function:

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>

这篇关于使用Twitter Bootstrap进度条的Javascript倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！