0

我当然有一个月的计划，在一个月的计划中，我想在我的引导馅饼进度中显示剩余天数的百分比。

我的代码：

    <div class="row">
        <div class="row">
                <div style="padding-top: 10px;" class="col-6 ">
                    <div class="progress yellow">
                        <span class="progress-left">
                            <span class="progress-bar"></span>
                        </span>
                        <span class="progress-right">
                            <span class="progress-bar"></span>
                        </span>
                        <div class="progress-value">75%</div>
                    </div>
                        <p align="center">Remainig Days</p>
                </div>
            </div>
     </div>

我的$objDateStart,$objDateEnd 变量中有开始日期和结束日期，如下所示

$objDateStart = DateTime::createFromFormat('Y-m-d', $vDetail['start_date']);
$objDateEnd = DateTime::createFromFormat('Y-m-d', $vDetail['end_date']);

$objDateStart = 2019-09-20
$objDateEnd   = 2019-10-20

在当前计划中，根据剩余天数，我还有两天我想显示进度饼

您能否帮助如何动态显示剩余天数。

在此处输入图像描述

4

1 回答 1

2

这是计算 Javascript 中过去天数百分比的一种方法：

var objDateStart = "2019-09-20T00:00:00Z"
var objDateEnd = "2019-10-20T00:00:00Z"
var today = new Date().toISOString().split('T')[0] + 'T00:00:00Z';

var totalDays = (new Date(objDateEnd).valueOf() - new Date(objDateStart).valueOf()) / 1000 / 60 / 60 / 24
var remainingDays = (new Date(objDateEnd).valueOf() - new Date(today).valueOf()) / 1000 / 60 / 60 / 24

console.log(totalDays, remainingDays);

var ratio = ((totalDays - remainingDays) / totalDays).toFixed(2);
var percentage = Math.round(ratio * 100) + "%";

console.log(ratio, percentage);

document.getElementById('progress-percentage').innerText = percentage;
document.getElementById('progress-count').innerText = remainingDays + " ";
<div class="row">
  <div class="row">
    <div style="padding-top: 10px;" class="col-6 ">
      <div class="progress yellow">
        <span class="progress-left">
          <span class="progress-bar"></span>
        </span>
        <span class="progress-right">
          <span class="progress-bar"></span>
        </span>
        <div id="progress-percentage" class="progress-value">75%</div>
      </div>
      <p align="center"><span id="progress-count"></span>Remainig Days</p>
    </div>
  </div>
</div>

于 2019-10-18T05:52:50.687 回答