我想过程吧放缓速度HTML

Question

1 problem- 我想我的进程条的速度减慢。我希望它需要1分钟才能完成loading.Here是我的代码： 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代码：

<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> 

第二problem-与装载我想一些图像了slideDown慢慢根据我进度条。当过程完成后，整个图像显示在下一页。

其实我想创建一个小网站来了解更多在这个网站我试图处理图像这一领域是新的，处理新的扫描图像后，将显示下一页。 帮助我纠正我的错误。

Answer 1

试试这个（你必须在你的代码中的一些语法错误）：

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>

尽量避免将数据传递到setTimeout()功能串。改为传递匿名函数。它看起来像使用eval()函数。因为评估“实时”代码比直接在脚本中直接编码要慢。

Answer 2

我已经实现了使用jQuery动画您的要求。请检查下面的代码段，并让我知道，如果你发现任何查询。

$('#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" />