Javascript 根据setInterval值将div增长至100%

我在函数中有一个

setInterval（）

。我想创建一个状态栏，向用户显示在

setInterval（）

完成其时间之前还有多少时间

有什么办法吗？我试过了，但没有成功

函数滑动开关（）{
var myInterval=setTimeout（滑动开关，3000）；
var calc=myInterval/30；
$（“底部状态”）。宽度（计算值）；
}
滑动开关（）
#底部#状态{
宽度：1px；
高度：1px；
背景色：#000；
}
以下是一个基于您的代码的示例（应改进停止条件）


progress=0；
函数滑动开关（）{
var myInterval=setTimeout（滑动开关，100）；
进步++；
var calc=进度*10；
如果（进度>100）清除间隔（myInterval）；
$（“底部状态”）。宽度（计算值）；
}
滑动开关（）
#底部#状态{
宽度：10px；
高度：10px；
背景色：#000；
}
以下是一个基于您的代码的示例（应改进停止条件）


progress=0；
函数滑动开关（）{
var myInterval=setTimeout（滑动开关，100）；
进步++；
var calc=进度*10；
如果（进度>100）清除间隔（myInterval）；
$（“底部状态”）。宽度（计算值）；
}
滑动开关（）
#底部#状态{
宽度：10px；
高度：10px；
背景色：#000；
}
根据客户的回答进行一些调整：

var progress = 0;
function slideSwitch() {   
  var myInterval = setTimeout(slideSwitch,100);
  progress++;
  var calc =  progress * 10;

  if (progress > 100 ) { 
    clearInterval(myInterval);
    progress = 0;
    return;
  }

  $("#bottom_status").width(calc);    
}

slideSwitch();

此处示例：
对您的答案进行了一些调整：

var progress = 0;
function slideSwitch() {   
  var myInterval = setTimeout(slideSwitch,100);
  progress++;
  var calc =  progress * 10;

  if (progress > 100 ) { 
    clearInterval(myInterval);
    progress = 0;
    return;
  }

  $("#bottom_status").width(calc);    
}

slideSwitch();

此处示例：
您需要使用setInterval在指定时间过后更新progressbar和ClearInVal

function slideSwitch() {
    var maxtime = 3000;
  var incremental = 500;
  var actualtime = 0;

  var interval = setInterval(function() {
    actualtime += incremental;
    var percentage = 100 / maxtime * actualtime;
    $("#bottom_status").width(percentage+"%");
    if (actualtime == maxtime) {
        clearInterval(interval);
    }
  }, incremental)

}


slideSwitch();

在指定时间过后，您需要使用setInterval更新progressbar和ClearInVal

function slideSwitch() {
    var maxtime = 3000;
  var incremental = 500;
  var actualtime = 0;

  var interval = setInterval(function() {
    actualtime += incremental;
    var percentage = 100 / maxtime * actualtime;
    $("#bottom_status").width(percentage+"%");
    if (actualtime == maxtime) {
        clearInterval(interval);
    }
  }, incremental)

}


slideSwitch();

更具动态性和防错性的解决方案：


无需担心固定宽度
一切都是根据宽度计算的
平滑每秒16帧（可变）


const wrapper=document.getElementById（'wrapper'）；
const status=document.getElementById（'status'）；
让间隔；
功能滑块开关（时间）{
常数fps=16；
常数切片=wrapper.offsetWidth/（时间/fps）；
设温度=status.offsetWidth；
间隔=设置间隔（（）=>{
温度=温度+切片；
status.style.width=temp+'px'；
}，fps）；
设置超时（（）=>{
//TODO:在这里切换幻灯片
间隔时间；
status.style.width='0px'；
}，时间）；
}
滑动开关（3000）
#包装器{
背景：#eee；
}
#地位{
宽度：0px；
高度：1px；
背景色：#000；
}
更具动态性和防错性的解决方案：


无需担心固定宽度
一切都是根据宽度计算的
平滑每秒16帧（可变）


const wrapper=document.getElementById（'wrapper'）；
const status=document.getElementById（'status'）；
让间隔；
功能滑块开关（时间）{
常数fps=16；
常数切片=wrapper.offsetWidth/（时间/fps）；
设温度=status.offsetWidth；
间隔=设置间隔（（）=>{
温度=温度+切片；
status.style.width=temp+'px'；
}，fps）；
设置超时（（）=>{
//TODO:在这里切换幻灯片
间隔时间；
status.style.width='0px'；
}，时间）；
}
滑动开关（3000）
#包装器{
背景：#eee；
}
#地位{
宽度：0px；
高度：1px；
背景色：#000；
}

myinterval
将是计时器的id，因此我不确定将其除以
30时所需的输出。您还使用了
setTimeout（）
，而不是
setInterval（）
作为标题和问题state@RoryMcCrossan我以为是0到3000的时候了。所以除以30，我可以用%的值来增加我的div。例如width:80%，那么您试图创建的逻辑是在30秒内填充进度条-正确吗？@rorymcrossan span或div将以0宽度开始。根据超时过程（从0到3000秒），div/span将增长到100%。例如：超时是1000秒，div是33,3%宽度，time 2000 div是66,6%，time 3000 div是100%@RoryMcCrossan说的是
myInterval
不是3000。它是浏览器针对该超时返回的id。console.log（myInterval）将清楚地显示它。
myInterval
将是计时器的id，因此我不确定当您将它除以
30
时您期望的输出是什么。您还使用了
setTimeout（）
，而不是
setInterval（）
作为标题和问题state@RoryMcCrossan我以为是0到3000的时候了。所以除以30，我可以用%的值来增加我的div。例如width:80%，那么您试图创建的逻辑是在30秒内填充进度条-正确吗？@rorymcrossan span或div将以0宽度开始。根据超时过程（从0到3000秒），div/span将增长到100%。例如：超时是1000秒，div是33,3%宽度，time 2000 div是66,6%，time 3000 div是100%@RoryMcCrossan说的是
myInterval
不是3000。它是浏览器针对该超时返回的id。日志（myInterval）将清楚地显示这一点。我可能有点过火了。。在大约100行JS中。我可能有点过火了。。在大约100行JS中。