Javascript div宽度倒计时

我试图通过div的宽度来想象倒计时。这可以用于显示下一条横幅何时滑入的横幅系统，或者用于显示通知可见时间的通知系统

因此，在下面的示例中，我在5秒后清空了

.outer

div，但是

.timer

div的宽度没有达到

宽度：0%与
设置超时（）同时启动

变量
len
表示横幅或通知将显示多长时间

变量
offset
中的计算让我感到厌烦（我想），我似乎无法正确计算。我希望它是动态的，也就是说，无论
len
是什么，外部/父div的宽度是什么，它总是需要
len
时间才能达到
宽度：0%

我希望我的解释有道理。任何帮助都将不胜感激


const len=5000；
let outer=document.querySelector（'.outer'）；
让timer=document.querySelector（'.timer'）；
设timerWidth=timer.offsetWidth；
让偏移量=长度/时宽；
设init=100；
let interval=setInterval（（）=>{
初始=初始-偏移量；
timer.style.width=init+'%'；
}, 1000);
设置超时（（）=>{
outer.innerHTML=''；
间隔时间；
}，len）
*{
框大小：边框框；
}
身体{
填充：100px 10px 10px；
}
.外部{
宽度：100%；
边框：1px实心板岩灰色；
填充：10px；
}
.计时器{
宽度：100%；
高度：10px；
背景：红色；
过渡：所有1000ms线性；
}

这里有消息

如果使用宽度百分比，则无需知道方框的宽度。
您只需要减去并将偏移量添加到超时

const len = 5000;
let outer = document.querySelector('.outer');

let timer = document.querySelector('.timer');
let timerWidth = timer.offsetWidth;
let offset = 100 * 1000 / 5000;


let interval = setInterval(() => {
init = init - 20;
timer.style.width = init + '%';
}, 1000);

setTimeout(() => {
outer.innerHTML = '';
clearInterval(interval);
}, len + 1000);

代码有两个问题：

interval
不会在加载页面时立即启动，因此CSS的转换会延迟
偏移量确实是错的
下面是我如何修复它的：


让toeferse=3000；//随意修改
让勾号=1000//如果你修改了这个，别忘了复制
//CSS中的过渡道具
让countDownEl=document.querySelector（“#倒计时”）；
let outer=document.querySelector（'.outer'）；
让timer=document.querySelector（'.timer'）；
设init=100；
//我们根据刻度和经过的时间计算偏移量
let offset=init/（toeferse/tick）；
countDownEl.innerHTML=init；
设置超时（（）=>{
//我们需要尽快开始第一次CSS转换，这样就不会太晚了。
初始=初始-偏移量；
timer.style.width=init.toFixed（2）+'%'；
},0)
let interval=setInterval（（）=>{
//同样的间隔。
countDownEl.innerHTML=init；
初始=初始-偏移量；
timer.style.width=init.toFixed（2）+'%'；
}，勾号）；
设置超时（（）=>{
//相同的清除超时
outer.innerHTML=''；
间隔时间；
}，即失效）
*{
框大小：边框框；
}
身体{
填充：100px 10px 10px；
}
.外部{
宽度：100%；
边框：1px实心板岩灰色；
填充：10px；
}
.计时器{
宽度：100%；
高度：10px；
背景：红色；
过渡：宽度1s线性；
}

这里有消息

您使用的是
%
单位，为什么不直接计算动画开始以来经过的时间，而不是维护自己的计数器（
init
）？