我有两个 Date()
时间,我尝试使用它们之间的差异来设置进度条的宽度,当没有更多时间时,进度条的宽度从 100% 缩小到 0%时代之间的差异,但我得到了非常奇怪的结果。
这就是我目前尝试执行的方法(它被拆分为 React 中的几个不同函数,因此我只包含相关的代码):
首先,我设置了目标日期时间,将 endDate
设置为接下来 24 小时内的最小时(例如晚上 10 点整)...
this.endDate = new Date();
if (this.props.data.end_hr === 0) {
this.endDate.setHours(24, 0, 0, 0);
} else {
this.endDate.setHours(this.props.data.end_hr);
}
this.endDate.setMinutes(0);
this.endDate.setSeconds(0);
this.countdown = setInterval(this.timeRemaining, 1000);
然后,在每秒触发的 timeRemaining
函数中,我获取当前日期时间并计算它们之间的差异。最后,我试图计算出发送到进度条 css width 属性的百分比...
let now = new Date().getTime();
let diff = this.endDate - now;
let percent =
Math.round(((diff / this.endDate) * 100000000 * 2) / 100) + '%';
this.countdownProgress.style.width = percent;
diff
100% 正确,但百分比错误。
我尝试了各种不同的方法来计算我能想到的百分比,但没有任何效果符合预期,上面的方法是我能得到的最接近的方法。
有人可以告诉我哪里出错了吗?
编辑:@Danziger 的答案以我想要使用的方式实现。这会将开始时间设置为晚上 10 点,结束时间设置为午夜。
事实证明它确实工作正常,所以我的代码中一定有其他东西导致了这个问题。再次感谢 Danziger 为我带来光明!
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const startDate = new Date();
startDate.setHours(22);
startDate.setMinutes(0);
startDate.setSeconds(0);
const endDate = new Date();
endDate.setHours(24,0,0,0);
endDate.setMinutes(0);
endDate.setSeconds(0);
const range = endDate - startDate;
function updateCountdown() {
const diff = Math.max(0, endDate - new Date());
progressBar.style.width = `${ 100 * diff / range }%`;
progressText.innerText = `${ `000${ Math.ceil(diff / 1000) }`.slice(-4) } seconds`
if (diff >= 0) {
requestAnimationFrame(updateCountdown);
}
}
updateCountdown();
body {
font-family: monospace;
}
.progressBar__base {
position: relative;
height: 32px;
border: 3px solid black;
margin: 0 0 8px;
}
.progressBar__progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: blue;
}
<div class="progressBar__base">
<div class="progressBar__progress" id="progressBar"></div>
</div>
<div id="progressText"></div>
最佳答案
我认为您的问题是您没有定义的 startTime
来用作引用,而是使用 now
。
如果你有一个startTime
,你会这样做:
let now = new Date().getTime();
let totalTime = endTime - startTime;
let progress = now - startTime;
let percentage = (progress / totalTime) * 100;
我实际上不确定您自己的计算会得到什么值。
关于javascript - 两个给定时间戳剩余时间的百分比 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54336467/