समय के अनुसार जावास्क्रिप्ट लोडिंग बार्स

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>

है

Answer 2

यहां आपके कोड का थोड़ा सा रिफैक्टर संस्करण है। प्रगति पट्टी चलाने के लिए आपको startBar() फ़ंक्शन को उस समय के साथ कॉल करना होगा जब आप इसे प्रारंभ करना और समाप्त करना चाहते हैं और प्रगति बार तत्व के id पर कॉल करना होगा। उदाहरण के लिए, पहली बार के नीचे दिए गए कोड में 1 सेकंड के बाद शुरू होगा और 6 सेकंड के बाद समाप्त होगा (कुल में 5 सेकंड के लिए चल रहा है)।

मैंने HTML5 progress तत्व का भी उपयोग किया। progress के रूप में divs का उपयोग करने से यह काफी बेहतर है और आपको किसी भी सीएसएस पैरामीटर में हेरफेर करने की ज़रूरत नहीं है, आप बस इसका मान बदलते हैं। इसके अलावा इसमें प्लेटफॉर्म और ब्राउजर के मूल निवासी को देखने का बोनस है। हालांकि, अगर आप इसे सभी प्लेटफार्मों पर देखने के लिए स्टाइल करना चाहते हैं, तो यह दर्द का थोड़ा सा हो सकता है। यहाँ एक 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>