显示时间倒计时进度条 [英] Showing a time countdown progress bar

问题描述

我在这个网站。

我想做的是，有一个3分钟倒计时，并显示剩下多少分钟和秒。所以，而不是显示百分比我想显示剩余时间。

我使用以下代码：

JS

 进度（100，$（'＃progressBar'））; //这是定时器应该每秒更新
 
函数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; / *与#progressBar高度相同，如果我们想要文本中间对齐* / 
 width：0; 
 background-color：＃CBEA00; 
} 
  

解决方案

有点这个功能：

• 使用3个参数（ timeleft ， timetotal ，元素）而不是2实际


• 使用 setTimeout （）每秒刷新进度条


• 检查 timeleft 可刷新进度条。

 进度（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

[Tip] $ b

如果你想让你的进度条平稳不断地减少，使用这段代码：

  .animate width：progressBarWidth}，timeleft == timetotal？0：1000，linear）
  

JSFiddle

I came across this progress bar code on this site.

What I want to do is, have a 3 minute countdown and show how many minutes and seconds are left. So rather than displaying percentage I want to display time left.

I use the following code:

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

解决方案

You'll need to change a bit this function :

• Use 3 parameters (timeleft, timetotal, element) instead of the 2 actual
• Use setTimeout() to refresh your progress bar every second
• Check timeleft to know if you need to refresh the progress bar

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

Plus, you should add this CSS, to avoid your progress bar to overflow its container :

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

JSFiddle

[Tip]

If you want your progress bar to smoothly and constantly decrease, use this code instead :

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

JSFiddle

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