如何減慢進度條？

我有以下代碼：如何減慢進度條？

<td id="drop-files" ondragover="return false;" colspan="2"> 
    <br />Drag and drop files to be uploaded...<br /><br /> 
    <input type="hidden" id="iFile" value="" /><input type="hidden" id="numFiles" value="" /> 
    <div id="progressBar" style="width: 300px; height: 20px; border-radius: 20px; border: 1px solid rgb(0,0,0); opacity: 0; text-align: center; background: -moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) 0%, rgb(255,255,255) 0%, rgb(255,255,255) 100%);">0%</div><br /> 
    <div id="fileCase"></div> 
</td> 

// Note: The double ## is not a mistake. The code is running under 
// ColdFusion where # is a is reserved character. So ## escapes the # 
$(document).ready(function() { 
    function pad(number, digits) { 
     return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number; 
    } 

    function processFile(file,num,arr){ 
     var inputRow = "<input type='hidden' value='' id='file_"+pad(arr,3)+"' name='file_"+pad(arr,3)+"' />"; 
     $("##fileCase").append(inputRow); 
     var o = $("##file_"+pad(arr,3)); 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       o.val(e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;")); 
      } 
      reader.readAsDataURL(file); 
    } 

    function updateProgress(idx,tot){ 
     var midPt = Math.floor((idx)/tot*100); 
     $("##progressBar").css("background","-moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) "+midPt+"%, rgb(255,255,255) "+midPt+"%, rgb(255,255,255) 100%)"); 
     $("##progressBar").html(midPt+"%"); 
    } 
    // Sets up dataTransfer event 
    jQuery.event.props.push('dataTransfer'); 
    // File Array 
    var nameArray = []; 
    $("##fileCase").append("<input type='hidden' id='nameArray' value='' name='nameArray'>"); 

    // Bind drop to drop zone 
    $('##drop-files').bind('drop', function(e) { 
     var iFile = 0; 
     // Prevents element from default function 
     e.preventDefault(); 
     // Grabs list of files 
     var files = e.dataTransfer.files; 
     var numFiles = files.length;set("numFiles",numFiles); 
     $("##progressBar").animate({opacity: 1},500); 
     // Loop through files... 
     updateProgress(0,numFiles); 
     $.each(files, function(index, file) { 
      nameArray.push(files[index].name); 
      arr = nameArray.length; 
      $("##nameArray").val(nameArray.join("|")); 
      processFile(files[index],index+1,arr); 
      iFile++;set("iFile",iFile); 
      //setTimeout("updateProgress("+iFile+","+numFiles+");",250); 
      setTimeout("var midPt = Math.floor(get('iFile')/get('numFiles')*100);$('##progressBar').css('background','-moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) '+midPt+'%, rgb(255,255,255) '+midPt+'%, rgb(255,255,255) 100%)');$('##progressBar').html(midPt+'%');",500) 
     }); 
    }); 
});

它的偉大工程，除了一個小小的小東西。進度條似乎過快地達到100％。我寧願慢一點，這樣我就可以得到一些看起來很徹底的東西。

任何人都知道我可以如何減慢它，讓我們實際上可以看到進度條的工作？

代碼中的set()和get()功能只是快速的函數我做存儲在隱藏輸入表單元素變量允許setTimeout功能工作。

欣賞你的想法。

來源

2013-03-13 Eliseo d' Annunzio

'$（「## progressBar」）'？你的意思是$（「＃progressBar」），對吧？ – 2013-03-13 00:43:15

您可以通過上傳更大的文件來減慢速度。 – ahren 2013-03-13 00:44:12

@MattBall，哦，對不起...... ##是因爲我在基於ColdFusion的環境中運行這個程序，並且##轉義＃...道歉因爲在開始時沒有明確說明...... – 2013-03-13 00:48:20

我不明白你爲什麼要這樣做，爲什麼你要通過漸變而不是動畫的寬度來讓你使用css3轉換延遲，但是你可以輕鬆實現每次updateProgress（）運行時，只需添加一個小的jquery延遲即可實現延遲效果。

在更新css之前就鏈接它。

http://api.jquery.com/delay/

來源

2013-03-13 10:04:44

如何減慢進度條？

回答

相關問題