开发者

Jquery Progressbar with countdown timer

开发者 https://www.devze.com 2023-04-10 19:46 出处:网络
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.

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

精彩评论

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