进度的日期用PHP和CSS 2之间

Question

我希望有一个进度条，显示多少时间2天给予之间完成，很可能我得到的答案，但它不能在某些情况下工作

样式：

<style type="text/css"> 
    #progressbar div 
    { 
     background-color: #99cc66; 
     width: 50%; 
     height: 20px; 
     border-radius: 10px; 

    } 
    </style> 

壳体1：工作代码

<?php 
$date1 = strtotime("2014-09-05 11:44:01"); 
$date2 = strtotime("2014-09-07 12:44:01"); 
$today = time(); 


$num = $today - $date1; 
$den = $date2 - $date1; 
$percentage = ($today - $date1)/($date2 - $date1) * 100; 
?> 
<?php if($percentage<100 && $percentage>=0){ ?> 
<div id="progressbar" style="border: 1px solid ; border-radius: 10px;"> 
<div style="width: <?php echo $percentage; ?>%;"><span><?php echo round($percentage,2); ?>%</span></div> 
</div> 
<?php } ?> 

壳体2：不工作

如果我甲肝e将日期时间格式更改为24小时，我看不出prgoressbar的$百分比是负值

<?php 
$date1 = strtotime("2014-09-05 11:44:01"); 
$date2 = strtotime("2014-09-07 23:44:01"); 
$today = time(); 


$num = $today - $date1; 
$den = $date2 - $date1; 
$percentage = ($today - $date1)/($date2 - $date1) * 100; 
?> 
<?php if($percentage<100 && $percentage>=0){ ?> 
<div id="progressbar" style="border: 1px solid ; border-radius: 10px;"> 
<div style="width: <?php echo $percentage; ?>%;"><span><?php echo round($percentage,2); ?>%</span></div> 
</div> 
<?php } ?> 

我想用甚至24小时格式这个进度工作，在此任何线索？

Answer 1

刚刚尝试使用这种逻辑：

if ($today < $date1) 
{ 
    $perentage = 0; 
} 
else if ($today > $date2) 
{ 
    $percentage = 100; 
} 
else 
{ 
    //$date2 - $date1 = 216000 (difference between 2 days) 
    // Logic 
    // 216000   => 100% 
    // $date2 - $today => x% 
    // x = ($date2 - $today)/2160 
    //$percentage = ($date2 - $today)/2160 
    //As the OP mentioned the difference can vary so here's how to do it for any diff. 
    $percentage = ($date2 - $today) * 100/($date2 - $date1); 
} 

Answer 2

使用jQuery

只包括

http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dark-hive/jquery-ui.css

- Demo Fiddle 2day

- Demofiddle 10second

将在2天后显示100％）

---

HTML

<span style="display: block;" class="percent"></span> 

<div class="progressbar-count" value="100%"></div> 

使用Javascript/jQuery的

jQuery.ease = function (start, end, duration, easing, callback) { 
    // Create a jQuery collection containing the one element 
    // that we will be animating internally. 
    var easer = $("<div>"); 

    // Keep track of the iterations. 
    var stepIndex = 0; 

    // Get the estimated number of steps - this is based on 
    // the fact that jQuery appears to use a 13ms timer step. 
    // 
    // NOTE: Since this is based on a timer, the number of 
    // steps is estimated and will vary depending on the 
    // processing power of the browser. 
    var estimatedSteps = Math.ceil(duration/13); 

    // Set the start index of the easer. 
    easer.css("easingIndex", start); 

    // Animate the easing index to the final value. For each 
    // step of the animation, we are going to pass the 
    // current step value off to the callback. 
    easer.animate({ 
     easingIndex: end 
    }, { 
     easing: easing, 
     duration: duration, 
     step: function (index) { 
      // Invoke the callback for each step. 
      callback(
      index, stepIndex++, estimatedSteps, start, end); 
     } 
    }); 
}; 
$(".progressbar-count").each(function() { 
    var $self = $(this), 
     targetVal = parseInt($self.attr("value")); 
    $self.progressbar({ 
     value: 0 
    }); 
    $self.prev(".percent").text("0%"); 
    $.ease(0, targetVal, 172800000, "swing", function (i) { 
     $self.progressbar("option", "value", parseInt(i)); 
     $self.prev(".percent").text(parseInt(i) + "%"); 
    }); 
}); 

Answer 3

我想你应该定义时区。

然后你可以使用：

date_default_timezone_set('UTC'); 
$date1 = strtotime("2014-09-04 17:44:01". " UTC"); 
$date2 = strtotime("2014-09-07 23:44:01". " UTC");