使用php和css在两个日期之间使用Progressbar

我想要一个progressbar来显示两天之间完成的时间，很可能我得到了答案，但在某些情况下它不起作用

风格：

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

    }
    </style>

#进步酒吧部
{
背景色：#99cc66；
宽度：50%；
高度：20px；
边界半径：10px；
}

案例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 } ?>

使用jquery
包括

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

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) + "%");
    });
});

jQuery.ease=函数（开始、结束、持续时间、缓解、回调）{
//创建包含一个元素的jQuery集合
//我们将在内部设置动画。
var-easer=$（“”）；
//跟踪迭代。
var指数=0；
//获取估计的步骤数-这是基于
//jQuery似乎使用了13毫秒的计时器步。
//
//注意：由于这是基于计时器的，因此
//步骤是估计的，并将根据具体情况而有所不同
//浏览器的处理能力。
var estimatedSteps=Math.ceil（持续时间/13）；
//设置画笔的开始索引。
easer.css（“easingIndex”，start）；
//将缓和索引设置为最终值。对于每个
//动画的步骤，我们将通过
//当前步长值关闭到回调。
动画画师({
easingIndex:结束
}, {
缓和:缓和,，
持续时间：持续时间，
步骤：函数（索引）{
//为每个步骤调用回调。
回拨(
索引、步骤索引++、估计步骤、开始、结束）；
}
});
};
$（“.progressbar count”）。每个（函数（）{
var$self=$（此），
targetVal=parseInt（$self.attr（“value”））；
$self.progressbar({
数值：0
});
$self.prev（“.percent”）.text（“0%”）；
$.ease（0，targetVal，172800000，“swing”，功能（i）{
$self.progressbar（“选项”、“值”、parseInt（i））；
$self.prev（“.percent”）.text（parseInt（i）+“%”；
});
});
使用jquery
包括

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

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) + "%");
    });
});

jQuery.ease=函数（开始、结束、持续时间、缓解、回调）{
//创建包含一个元素的jQuery集合
//我们将在内部设置动画。
var-easer=$（“”）；
//跟踪迭代。
var指数=0；
//获取估计的步骤数-这是基于
//jQuery似乎使用了13毫秒的计时器步。
//
//注意：由于这是基于计时器的，因此
//步骤是估计的，并将根据具体情况而有所不同
//浏览器的处理能力。
var estimatedSteps=Math.ceil（持续时间/13）；
//设置画笔的开始索引。
easer.css（“easingIndex”，start）；
//将缓和索引设置为最终值。对于每个
//动画的步骤，我们将通过
//当前步长值关闭到回调。
动画画师({
easingIndex:结束
}, {
缓和:缓和,，
持续时间：持续时间，
步骤：函数（索引）{
//为每个步骤调用回调。
回拨(
索引、步骤索引++、估计步骤、开始、结束）；
}
});
};
$（“.progressbar count”）。每个（函数（）{
var$self=$（此），
targetVal=parseInt（$self.attr（“value”））；
$self.progressbar({
数值：0
});
$self.prev（“.percent”）.text（“0%”）；
$.ease（0，targetVal，172800000，“swing”，功能（i）{
$self.progressbar（“选项”、“值”、parseInt（i））；
$self.prev（“.percent”）.text（parseInt（i）+“%”；
});
});
尝试使用以下逻辑：

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);
}

if（$today<$date1）
{
$perentage=0；
}
else if（$today>$date2）
{
$percentage=100；
}
其他的
{
//$date2-$date1=216000（两天之间的差异）
//逻辑
// 216000          => 100%
//$date2-$today=>x%
//x=（$date2-$today）/2160
//$percentage=（$date2-$today）/2160
//正如OP所提到的，差异可能会有所不同，所以这里介绍了如何处理任何差异。
$percentage=（$date2-$today）*100/（$date2-$date1）；
}
尝试使用以下逻辑：

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);
}

if（$today<$date1）
{
$perentage=0；
}
else if（$today>$date2）
{
$percentage=100；
}
其他的
{
//$date2-$date1=216000（两天之间的差异）
//逻辑
// 216000          => 100%
//$date2-$today=>x%
//x=（$date2-$today）/2160
//$percentage=（$date2-$today）/2160
//正如OP所提到的，差异可能会有所不同，所以这里介绍了如何处理任何差异。
$percentage=（$date2-$today）*100/（$date2-$date1）；
}
我认为你也应该定义时区

然后您可以使用：

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

我认为你也应该定义时区

然后您可以使用：

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

案例1和案例2中的代码有什么区别？我看不到？@LinkinTED检查每个箱子上的$date1和$date，我帮不了你，我想我是瞎了，我还是看不到：/1号箱子只是
$date1=strotime（“2014-09-05 11:44:01”）$日期2=标准时间（“2014-09-07 12:44:01”）和2号
$date1=strotime（“2014-09-05 11:44:01”）$日期2=标准时间（“2014-09-07 23:44:01”）
2014-09-07 23:44:01
23:44:01这是区别案例1和案例2中的代码有什么区别？我看不到？@LinkinTED检查每个箱子上的$date1和$date，我帮不了你，我想我是瞎了，我还是看不到：/1号箱子只是
$date1=strotime（“2014-09-05 11:44:01”）$date2=stroti