开发者

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!');
    }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜