jquery循環進度條

-1

我需要以下進度條在循環中運行。所以在倒數到零之後，再次用定義的值重新開始。jquery循環進度條

這是JS

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
function progress(timeleft, timetotal, $element) { 
    var progressBarWidth = timeleft * $element.width()/timetotal; 
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " seconds to go"); 
    if(timeleft > 0) { 
     setTimeout(function() { 
      progress(timeleft - 1, timetotal, $element); 
     }, 1000); 
    } 
}; 

progress(20, 20, $('#progressBar')); 
});//]]> 

</script> 

</head> 
<body> 
    <div id="progressBar"> 
    <div></div> 
</div>

來源

2015-12-02 Kjellson

if(timeleft > 0) { 
     setTimeout(function() { 
      progress(timeleft - 1, timetotal, $element); 
     }, 1000); 
    } 
else 
    progress(20, 20, $('#progressBar'));

如果timeleft==0，再次調用該函數。

Fiddle

來源

2015-12-02 08:59:26 void

如果是的timeleft 0，那麼您可以重置值並再次調用progress()。

function progress(timeleft, $element, timetotal) { 
 
    timetotal = arguments.length == 3 ? timetotal : timeleft; 
 
    var progressBarWidth = timeleft * $element.width()/timetotal; 
 
    $element.find('div').animate({ 
 
    width: progressBarWidth 
 
    }, timeleft == timetotal ? 1 : 1000, 'linear', function() { 
 
    progress(timeleft == 0 ? timetotal : timeleft - 1, $element, timetotal); 
 
    }).html(timeleft + " seconds to go"); 
 
}; 
 

 
progress(5, $('#progressBar'));

#progressBar { 
 
    width: 90%; 
 
    margin: 10px auto; 
 
    height: 22px; 
 
    background-color: #0A5F44; 
 
} 
 
#progressBar div { 
 
    height: 100%; 
 
    text-align: right; 
 
    padding: 0 10px; 
 
    line-height: 22px; 
 
    /* same as #progressBar height if we want text middle aligned */ 
 
    width: 0; 
 
    background-color: #CBEA00; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="progressBar"> 
 
    <div></div> 
 
</div>

來源

2015-12-02 09:13:58

http://jsfiddle.net/arunpjohny/t7vyjzba/ –

jquery循環進度條

回答

相關問題