gpt4 book ai didi

jquery - 显示时间倒计时进度条

转载 作者:技术小花猫 更新时间:2023-10-29 11:25:45 28 4
gpt4 key购买 nike

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

最佳答案

你需要稍微改变这个函数:

  • 使用 3 个参数(timelefttimetotalelement)代替 2 个实际值
  • 使用setTimeout()每秒刷新一次进度条
  • 检查 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;
}

片段:

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'));
#progressBar {
width: 90%;
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;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
<div></div>
</div>

[提示]

如果你想让你的进度条平稳地不断减少,请改用这段代码:

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

关于jquery - 显示时间倒计时进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24530908/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com