Question

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

    // 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>

Answer 1

您可以执行以下操作：

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

Answer 2

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

$(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>

Answer 3

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

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>

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

3 个答案: