Javascript 바 시간별로 로딩

Question

너무 많이 검색했지만 바를 구성하는 방법을 알아낼 수 없습니다.

나는 자동으로 따라 시간을 실행 3 개 로딩 막대를 넣어 계획 :

1st will start from 30 to 60 seconds 
2nd from 300 to 1800 seconds 
3rd from 1801 to 1860 seconds 

내 코드는이 (내가했는데,이 값을 변경할 수 있지만 작동하지 않는 방법을 모르는 것을 알고있을 것입니다 제대로 ... 이건 내가 필요한 도움 프레임 물건)

var my1Bar = setTimeout(start1Bar, 30000); 
var my2Bar = setTimeout(start2Bar, 300000); 
var my3Bar = setTimeout(start3Bar, 1800000); 
function start1Bar() { 
    var elem = document.getElementById("my1Bar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
     if (width >= 100) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
     } 
    } 
} 
function start2Bar() { 
    var elem = document.getElementById("my2Bar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
     if (width >= 100) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
     } 
    } 
} 
function start3Bar() { 
    var elem = document.getElementById("my3Bar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
     if (width >= 100) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
     } 
    } 
} 

당신에게 모든

Answer 1

startBar(3000,4000 ,"my1Bar"); 
 
startBar(4001,20000 ,"my2Bar"); 
 
startBar(20001,22000,"my3Bar"); 
 

 
function startBar(start_ms,end_ms,id){ 
 
    return setTimeout(function(){ 
 
     loadBar(start_ms,end_ms,id); 
 
    }, start_ms); 
 
} 
 
function loadBar(start_ms,end_ms,id){ 
 
    var elem = document.getElementById(id); 
 
    var widthAtStart = 0; 
 
    var widthAtEnd = 100; 
 
    var timeDuration=end_ms-start_ms; 
 
    var remindWidth=widthAtEnd-widthAtStart; 
 
    var curWidth=widthAtStart; 
 
    var lastTime=Date.now(); 
 
    var intervalId = setInterval(frame, 10); 
 
    function frame() { 
 
     var dt=Date.now()-lastTime; 
 
     lastTime=Date.now(); 
 
     var w=remindWidth*dt/timeDuration; 
 
     if (curWidth >= widthAtEnd) { 
 
      clearInterval(intervalId); 
 
      elem.style.width = '100%'; 
 
     } else { 
 
      curWidth+=w; 
 
      elem.style.width = curWidth + '%'; 
 
     } 
 
    } 
 
}

.bars>div{ 
 
    position:relative; 
 
    width:100%; 
 
    height:22px; 
 
    padding:1px; 
 
    margin:2px; 
 
    background:#ccc; 
 
} 
 
.bars>div>div{ 
 
    position:absolute; 
 
    height:20px; 
 
    width:0; 
 
    background:red 
 
}

<div class="bars"> 
 
    <div><div id="my1Bar"></div></div> 
 
    <div><div id="my2Bar"></div></div> 
 
    <div><div id="my3Bar"></div></div> 
 
</div>

0,123,763 감사입니다

Answer 2

다음은 코드의 약간 리팩터링 된 버전입니다. 진행 막대를 실행하려면 startBar()을 시작 및 종료하려는 시간과 진행 막대 요소의 id으로 호출해야합니다. 예를 들어 아래 코드에서 첫 번째 막대는 1 초 후에 시작하고 6 초 후에 끝납니다 (총 5 초 동안 실행).

또한 HTML5 progress 요소를 사용했습니다. progress이 의미 론적이므로 div를 사용하는 것보다 훨씬 낫습니다. 따라서 css 매개 변수를 조작 할 필요가 없습니다. 값을 변경하면됩니다. 또한 플랫폼과 브라우저에서 보게되는 보너스가 있습니다. 그러나 모든 플랫폼에서 동일하게 보이도록 스타일을 지정하려는 경우 약간의 어려움이있을 수 있습니다. 여기에 styling guide for progress element

startBar(1, 6, "first"); 
 
startBar(3, 6, "second"); 
 
startBar(5, 8, "third"); 
 

 
function startBar(from, to, id) { 
 
    // Convert seconds to miliseconds 
 
    from *= 1000; 
 
    to *= 1000; 
 

 
    // Delay the start of the loop for 'from' seconds 
 
    setTimeout(function() { 
 
    var bar = document.getElementById(id); 
 
    var duration = to - from; 
 
    var start = Date.now(); 
 

 
    // Start the loop 
 
    var loop = setInterval(function() { 
 
     var runningFor = Date.now() - start; 
 
     if (runningFor <= duration) { 
 
     bar.value = Math.ceil(runningFor/duration * 100); 
 
     } else { 
 
     bar.value = 100; 
 
     clearInterval(loop); 
 
     } 
 
    }, 10); 
 
    }, from); 
 
}

progress { 
 
    width: 100%; 
 
}

<progress id="first" value="0" max="100"></progress> 
 
<progress id="second" value="0" max="100"></progress> 
 
<progress id="third" value="0" max="100"></progress>