Показывать индикатор времени обратного отсчета

Question

Я наткнулся на этот штрих-код прогресса на this site.

Что я хочу сделать, у вас есть 3-минутный обратный отсчет и покажите, сколько минут и секунд осталось. Поэтому вместо отображения процента я хочу отобразить оставшееся время.

Я использую следующий код:

JS

progress(100, $('#progressBar')); // This is what the timer should update each second 

function progress(percent, $element) { 
    var progressBarWidth = percent * $element.width()/100; 
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + " minutes/seconds to go"); 
}; 

HTML

<div id="progressBar"> 
    <div></div> 
</div> 

CSS

#progressBar { 
    width: 923px; 
    margin: 10px auto; 
    height: 22px; 
    background-color: #0A5F44; 
} 

#progressBar div { 
    height: 100%; 
    text-align: right; 
    padding: 0 10px; 
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */ 
    width: 0; 
    background-color: #CBEA00; 
} 

Answer 1

Вам нужно немного изменить эту функцию:

• Использование 3 параметров (timeleft, timetotal, element) вместо фактического
• Используйте setTimeout(), чтобы обновить ваш прогресс бар 2 каждый второй
• Проверить timeleft знать, если вы нужно обновить прогресс бар

function progress(timeleft, timetotal, $element) { 
    var progressBarWidth = timeleft * $element.width()/timetotal; 
    $element 
     .find('div') 
     .animate({ width: progressBarWidth }, 500) 
     .html(timeleft + " seconds to go"); 
    if(timeleft > 0) { 
     setTimeout(function() { 
      progress(timeleft - 1, timetotal, $element); 
     }, 1000); 
    } 
}; 

progress(180, 180, $('#progressBar')); 

Кроме того, вы должны добавить этот CSS, чтобы избежать ваш прогресс бар, чтобы переполнить его контейнер:

#progressBar div { 
    box-sizing: border-box; 
} 

JSFiddle

[Подсказка]

Если вы хотите, чтобы ваш прогресс бар, чтобы плавно и постоянно уменьшаться, используйте этот код вместо:

.animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear") 

JSFiddle