两个日期之间的进度条（从脚本中获取“var”），HTML答案

【问题标题】：Progress bar between two dates (fetch "var" from script), HTML两个日期之间的进度条（从脚本中获取“var”），HTML
【发布时间】：2018-12-10 18:41:05
【问题描述】：

我希望制作一个在预先设置的两个日期之间前进的进度条。我混合了经过时间计数器和进度条的代码。脚本标签中的时间计数器获取日期之间的分钟差以及与当前日期的分钟距离（后者是进度）。我想做的是用变量“progress”中的值替换“aria-valuenow”的值；正如我所看到的，这足以获得日期之间的当前进度百分比。在进度条的代码中，从脚本外部访问此“进度”变量的语法应该如何？

    // Set the date we're counting down to
    var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();
    var startDate = new Date("Dec 1, 2018, 10:00:00").getTime();
    // Update the count down every 1 second
    var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now and the count down date
    var distanceWhole = countDownDate - startDate;
	var distanceLeft = countDownDate - now;
    
    // Time calculations for minutes and percentage progressed
    var minutesLeft = Math.floor(distanceLeft / (1000 * 60));
	var minutesTotal = Math.floor(distanceWhole / (1000 * 60));
	var progress = Math.floor(((minutesTotal - minutesLeft) / minutesTotal) * 100);
    }, 1000);

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
	<p id="demo"></p>
    <div class="container">
    <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
    </div>
    </div>
    </div>

【问题讨论】：

这仅显示一些硬编码值作为进度状态。如何让它对应任何值？

标签： javascript html twitter-bootstrap

【解决方案1】：

这是一个完整的工作示例：

$(document).ready(function () {

        var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();
        var startDate = new Date("Dec 1, 2018, 10:00:00").getTime();
// Update the count down every 1 second
// Get todays date and time
        var now = new Date().getTime();

// Find the distance between now and the count down date
        var distanceWhole = countDownDate - startDate;
        var distanceLeft = countDownDate - now;

// Time calculations for minutes and percentage progressed
        var minutesLeft = Math.floor(distanceLeft / (1000 * 60));
        var minutesTotal = Math.floor(distanceWhole / (1000 * 60));
        var progress = Math.floor(((minutesTotal - minutesLeft) / minutesTotal) * 100);
        $('#progressbar').attr('aria-valuenow', progress).css('width', progress + "%").html(progress + "% Complete");
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
    <p id="demo"></p>
    <div class="container">

        <div class="progress">
            <div id="progressbar" class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                70% Complete
            </div>
        </div>
        
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

你可以这样做：

$('#progressbar').attr('aria-valuenow', progress ).css('width', progress );

【讨论】：

这个 CSS 代码应该放在头部的样式标签中吗？如果是这样，我不让它工作。谢谢。
这是javascript代码。计算进度后必须放 if
我在 javascript 中的“var progress = ...”行之后添加了它，但进度条没有更新。我有两个想法：在你的建议中它应该不是“样式”而不是“宽度”，也许变量进度需要更新为进度=“宽度：”+进度+“％”以遵循原始语法例子。另外，应该保留还是删除 aria-valuenow="70" 和 style="width:70%？

【解决方案3】：

我基于 Juan 的回答的纯 JavaScript 解决方案：

var slider = document.getElementById("progressBar");
var progress = document.getElementById("progress");

// Set start and end date
var endDate = new Date("Mar 1, 2021 10:00:00").getTime();
var startDate = new Date("Jun 20, 2020, 10:00:00").getTime();

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distanceWhole = endDate - startDate;
var distanceLeft = endDate - now;

// Time calculations for minutes and percentage progressed
var minutesLeft = Math.floor(distanceLeft / (1000 * 60));
var minutesTotal = Math.floor(distanceWhole / (1000 * 60));
var result = Math.floor(((minutesTotal - minutesLeft) / minutesTotal) * 100);

window.onload = function() {
    setInterval(addFrame, 100);
}

function addFrame() {
    if (result < 100) {
        progress.style.width = result + "%";
        progress.innerHTML = result + "%";
    }
}

#progressBar {
    height: 25px;
    width: 70%;
    background: #dbcdbf;
    border: 1px solid rgba(244, 241, 237, 0);
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
}

#progress {
    background: #b36b24;
    color: #555;
    width: 0%;
    transition: width 2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

<div id="progressBar">
    <p id="progress"></p>
</div>

【讨论】：

如果我想让它在服务器上运行，我该如何命名文件？
您可以将所有内容组合在一个 HTML 中，并使用 HTML“样式”和“脚本”标签添加 CSS 和 JavaScript 代码，然后将其命名为 index.html 并将其上传到网络服务器。或者，您可以使用单独的 .css 和 .js 文件并将它们链接到您的主 HTML 文件中。我建议使用以下命名和结构： index.html（包含 HTML 代码）； style.css（包含样式）； script.js（包含逻辑）