javascript - 添加标记到带有倒计时的 jQuery 进度条

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，将进度条和标记放在彼此的顶部，并为标记的 div 提供更高的 z-index。

这是一个基本的 fiddle http://jsfiddle.net/mrQ3w/153/ .

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

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