Javascript进度条时间线

Javascript Progressbar Timeline

本文关键字：时间线 Javascript      更新时间：2024-04-10

我正在尝试创建一个进度条样式的时间线，它包含3个日期，并从中构建进度条。我在这里找到了一个有用的帖子，我用来构建这方面的基础知识，但它并没有完全达到我想要的效果。

简单地说，我希望0%是2013年1月12日，100%是2013年12月25日，然后进度条显示其间的日期。我已经用一些javascript设置了一个进度条来进行倒计时，但我不确定它是根据什么计算的，因为它已经达到了85%。由于今天是6号，所以应该只有约24%。

http://eklipztv.com/010110/

^演示|代码与

<script type='text/javascript'> 
$(function(){
var target = new Date('12/25/2013'),
    today = new Date(),
    daysToGo = Math.ceil((target.getTime() - today.getTime() ) / (1000*60*60*24)),
    percent = 100 - daysToGo;
$("#progressbar").progressbar({
    value: percent,
    create: function(event, ui) {
        $('.ui-progressbar');
    }
});
});  
</script>

这是您的百分比计算错误。

你应该做一些类似的事情：

var percent = 1 - daysToGo/25

25为12月1日至12月25日。现在你的百分比是以小数表示的，方程0.24。如果你想要百分比的话，把它乘以100。

您可以将其放入代码中：

var start = new Date('12/01/2013'),
    target = new Date('12/25/2013'),
    today = Date.now(),
    percent = (today-start)/(target-start)*100;
相关文章：