Question

所以我正在考虑用jQuery创建一个进度条。我想要像this之类的东西，或类似这段代码的东西：

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

但是我也希望能够根据数据添加制造商。通过标记我的意思是this所以说这是一个30分钟的倒计时，根据用户输入我需要一个标记放置在15分钟。

我认为这是可能的，但我不知道如何去做。任何帮助将不胜感激。

更新

这就是我现在所拥有的。我是javascript和jQuery的新手，所以我可能有一些非常错误的东西。现在我只是想在任何地方添加一个栏，然后我会根据我的数据在我想要的位置加一个吧。当然它不起作用。

function countdown(callback) {
    var bar = document.getElementById('progress'),
    time = 0, max = 100,
    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);
}
function createMarkers() {
    var bar = document.getElementById('progress'),
       var pos = "20px";
       m = $("<div class='marker'></div>");
    m.css({"margin-left": pos +'px'});
    bar.appendChild(m)
}
createMarkers()
countdown(function() {

});

http://jsfiddle.net/mrQ3w/147/

Answer 1

你需要为标记再做一个div，将进度条和标记放在彼此的顶部，使用更高的z-index作为标记的div。

这是一个基本的小提琴http://jsfiddle.net/mrQ3w/153/。

                  (function(i){
                    for(i;i>0;i--)
                   {createMarkers();}
                  })(4);

您需要根据需要计算 pos ，并根据需要传递标记数量。

使用倒计时将标记添加到jQuery进度条

1 个答案: