我想過程吧放緩速度HTML

1 problem- 我想我的進程條的速度減慢。我希望它需要1分鐘才能完成loading.Here是我的代碼： JS我想過程吧放緩速度HTML

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慢慢根據我進度條。當過程完成後，整個圖像顯示在下一頁。

其實我想創建一個小網站來了解更多在這個網站我試圖處理圖像這一領域是新的，處理新的掃描圖像後，將顯示下一頁。幫助我糾正我的錯誤。

來源

2016-05-17 trisha

對於問題1）在此行中從1增加數值爲n（這裏我增加至100）。 'VAR SIM = setTimeout的（「啓動（」 +人+ 「）」，100）;' 會不會是好使用jquery你的第二個問題？ –

試試這個（你必須在你的代碼中的一些語法錯誤）：

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()函數。因爲評估「實時」代碼比直接在腳本中直接編碼要慢。

來源

2016-05-17 05:58:30

-1

我已經實現了使用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" />

來源

2016-05-17 11:57:16

我曾嘗試運行上述代碼，但未運行。 – trisha

您是否已將jquery.min.js添加到您的html頁面中？即' –

我想過程吧放緩速度HTML

回答

相關問題