倒計時向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

你需要做一個更加格爲標誌，放置在彼此頂部的進度和標記具有較高的z-index爲標誌股利。

這裏是一個基本的小提琴http://jsfiddle.net/mrQ3w/153/。

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

您需要根據您的需求來計算POS，並根據您的需要通過標記的數目。