Ich möchte Geschwindigkeit der Prozessleiste in HTML

Question

verlangsamen 1. Problem- Ich versuche, die Geschwindigkeit meiner Prozess Bar zu verlangsamen. Ich will es 1min nehmen loading.Here abgeschlossen ist mein Code: JS

function start(al) { 
    var bar = document.getElementById('progressBar'); 
    var status = document.getElementById('status'); 
    status.innerHTML = al + "%"; 
    bar.value = al; 
    al++; 
    var sim = setTimeout("start(" + al + ")", 1); 
    if (al == 100) { 
    status.innerHTML = "100%"; 
    bar.value = 100; 
    clearTimeout(sim); 
    var finalMessage = document.getElementById('finalMessage'); 
    finalMessage.innerHTML = "Process is complete"; 
    } 

Html-Code:

<progress id="progressBar" value="0" max="100" style="width:400px;"></progress> 
    <span id="status"></span> 
    <h1 id="finalMessage"></h1> 
    <button onclick="start(0)">Scan</button> 

2. Problem- und mit dem Laden i einige Bild wollen langsam slidedown ist nach meiner Fortschrittsanzeige. und wenn der Prozess abgeschlossen ist, wird das ganze Bild auf der nächsten Seite angezeigt.

Eigentlich versuche ich eine kleine Website zu erstellen, um mehr zu wissen, als neu in diesem Bereich in dieser Website bin ich versuche, ein Bild zu verarbeiten und nach der Verarbeitung neues gescanntes Bild wird auf der nächsten Seite angezeigt. Hilf mir, meine Fehler zu korrigieren.

Answer 1

starten (Sie haben einige Syntaxfehler in Ihrem Code):

function start(al) { 
 
    var bar = document.getElementById('progressBar'); 
 
    var status = document.getElementById('status'); 
 
    status.innerHTML = al + "%"; 
 
    bar.value = al; 
 
    al++; 
 
     
 
    //var sim = setTimeout("start(" + al + ")", 10000); 
 
     
 
    var sim = setTimeout(function() { 
 
     
 
     start(al); 
 
    }, 100); // 100 milliseconds 
 
     
 
    if (al == 100) { 
 
     status.innerHTML = "100%"; 
 
     bar.value = 100; 
 
     clearTimeout(sim); 
 
     var finalMessage = document.getElementById('finalMessage'); 
 
     finalMessage.innerHTML = "Process is complete"; 
 
    } 
 
}

<progress id="progressBar" value="0" max="100" style="width:400px;"></progress> 
 
<span id="status"></span> 
 
<h1 id="finalMessage"></h1> 
 
<button onclick="start(0)">Scan</button>

Versuchen Sie, setTimeout() Funktion als String übergeben Daten zu vermeiden. Übergeben Sie stattdessen die anonyme Funktion. Es sieht so aus als ob man eine eval() Funktion benutzt. Weil es langsamer ist, "Live" -Code auszuwerten, als den Code direkt im Skript zu haben.

Answer 2

Ich habe Ihre Anforderung mit jQuery-Animation implementiert. Bitte überprüfen Sie das folgende Snippet und lassen Sie es mich wissen, wenn Sie irgendeine Frage finden.

$('#btns').click(function(){ 
 
    
 
    \t var $wrapper = $('<div />').addClass('wrap'); 
 
    
 
    $('img').wrap($wrapper); 
 
    $('img').css('opacity', 1); 
 
    
 
    $('img').parent().animate({ 
 
     height: '100px' 
 
    }, 
 
    { 
 
     duration: 2500, //you can change it according to your need of speed 
 
     
 
     step: function(al) 
 
     { 
 
     $('#status').html(al + "%"); 
 
     $('#progressBar').val(al); 
 
     al++; 
 
     
 
     if (al == 100) 
 
     { 
 
      $('#status').html("100%"); 
 
      $('#progressBar').val(100); 
 
     } 
 
     }, 
 
     complete: function() 
 
     { 
 
     $('#finalMessage').html("Process is complete"); 
 
     } 
 
    }); 
 
    
 
}); 
 

img{ 
 
    opacity:0; 
 
} 
 

 
.wrap { 
 
    position:relative; 
 
    height:0; 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<progress id="progressBar" value="0" max="100" style="width:400px;"></progress> 
 
    <span id="status"></span> 
 
    <h1 id="finalMessage"><h1> 
 
    <button id="btns">Scan</button> <!-- onclick="start(0)" --> 
 
    <img src="http://www.textileexpressfabrics.co.uk/WebRoot/BT4/Shops/BT3246/56F4/0B49/3BC3/A909/78CC/0A0C/0596/9596/tex_ex_1058_Plush_Velour_pink.jpg" />