Jquery Progressbar with countdown timer
Ive been searching high and low and was just wondering if it was possible to make the Jquery UI Progressbar interact with this piece of code.
Jquery Progress bar found here > http://docs.jquery.com/UI/Progressbar/
Code:
<script type="text/javascript">
jQuery(document).ready(function() {
$('#jQueryProgressbar1').countDown({
targetDate: {
'day': 25,
'month': 12,
'year': 2011,
'hour': 0,
'min': 0,
'sec': 0
}
});
Basically the ui progressbar will read the day, month, year etc from the code and intergrate that with the progressbar开发者_开发技巧's bar display......kinda like a countdown timer but with the progressbar.
Would something like this work? (demo)
var target = new Date('12/25/2011'),
today = new Date(),
daysToGo = Math.ceil((target.getTime() - today.getTime() ) / (1000*60*60*24)),
// probably not the best, but it should work
percent = 100 - daysToGo;
$("#progressbar").progressbar({
value: percent,
create: function(event, ui) {
$('.ui-progressbar').append(daysToGo + ' days left!');
}
});
精彩评论