javascript从开始日期和时间开始计数，多个目标

Question

您好，我正在构建一个时间跟踪应用程序，并且我在数据库中保存了一堆开始日期和时间，如果没有结束时间，我将使用 stackoverflow answser 中的代码，唯一的区别是我有多个目标例如我的html代码如下；

<ul class="draggable connected-sortable tasks ui-droppable" id="In Progress" data-assigned-status-id="6" style="height: 799px;">
    <li class="clearfix ui-draggable ui-draggable-handle" style="position: relative;">
        <div class="task_info clearfix">
            <!-- <p></p>
                                        <p></p> -->
            <p>Go to shops</p>
            <br>
            <br>
            <br> <a href="http://app.local/task/1">View more info</a>

        </div>
        <div class="user_info clearfix">

            <p><strong>User</strong>
            </p>
        </div>
        <br>
        <div class="form-group">
            <button type="button" class="btn btn-danger track_time" data-toggle="modal" data-id="109" data-post="data-php" data-action="track_time" data-href="http://app.local/timer/ajax/109">Track your time</button>
        </div>
        <div class="time-elapsed">0 day(s), 2:38:0</div>
        <div class="date_start_time" data-date-time="2015,10,27 20:08:00"></div>
        <div class="alerts-wrapper"></div>
    </li>

    <li class="clearfix ui-draggable ui-draggable-handle" style="position: relative;">
        <div class="task_info clearfix">
            <!-- <p></p>
                                        <p></p> -->
            <p>Clean room</p>
            <br>
            <br>
            <br> <a href="http://app.local/task/2">View more info</a>

        </div>
        <div class="user_info clearfix">

            <p><strong>User</strong>
            </p>
                </div>
        <br>
        <div class="form-group">
            <button type="button" class="btn btn-danger track_time" data-toggle="modal" data-id="86" data-post="data-php" data-action="track_time" data-href="http://app.local/timer/ajax/86">Track your time</button>
        </div>
        <div class="time-elapsed">0 day(s), 2:38:0</div>
        <div class="date_start_time" data-date-time="2015,10,27 22:03:00"></div>
        <div class="alerts-wrapper"></div>
    </li>
</ul>

我使用的javascript如下；

 var startDateTime = new Date($('.date_start_time').attr('data-date-time'));

                    var startStamp = startDateTime.getTime();
                    var newDate = new Date();
                    var newStamp = newDate.getTime();

                    var timer;

                    function updateClock() {

                        newDate = new Date();
                        newStamp = newDate.getTime();
                        var diff = Math.round((newStamp - startStamp) / 1000);

                        var d = Math.floor(diff / (24 * 60 * 60));
                        /* though I hope she won't be working for consecutive days :) */
                        diff = diff - (d * 24 * 60 * 60);
                        var h = Math.floor(diff / (60 * 60));
                        diff = diff - (h * 60 * 60);
                        var m = Math.floor(diff / (60));
                        diff = diff - (m * 60);
                        var s = diff;

                        $(".time-elapsed").html(d + " day(s), " + h + ":" + m + ":" + s);
                    }

                    setInterval(updateClock, 1000);

但正如您在上面的 html 中看到的，经过时间的 div 具有相同的值，而以下值不同；

<div class="date_start_time" data-date-time="2015,10,27 22:03:00">
<div class="date_start_time" data-date-time="2015,10,27 20:08:00">

所以我应该有不同的经过时间的值，有什么想法我在这里做错了吗？

Answer 1

您遇到的问题是您有 2 个具有相同类名的元素，并且您只为所有元素运行该函数一次，而您应该为具有该类名的每个元素运行该函数。 看看你的错误

1.

<div class="time-elapsed">0 day(s), 2:38:0</div>
<div class="date_start_time" data-date-time="2015,10,27 20:08:00"></div>
<div class="alerts-wrapper"></div>

2.

<div class="time-elapsed">0 day(s), 2:38:0</div>
<div class="date_start_time" data-date-time="2015,10,27 22:03:00"></div>
<div class="alerts-wrapper"></div>

现在我所做的是调整您的 Javascript 函数以循环遍历每个元素并在当前元素上运行该函数。

    var timer;

function updateClock() {
    $('.date_start_time').each(function() {
        var startDateTime = new Date( $(this).attr('data-date-time') );
        startStamp = startDateTime.getTime();
        newDate = new Date();
        newStamp = newDate.getTime();
        var diff = Math.round((newStamp - startStamp) / 1000);

        var d = Math.floor(diff / (24 * 60 * 60));
        /* though I hope she won't be working for consecutive days :) */
        diff = diff - (d * 24 * 60 * 60);
        var h = Math.floor(diff / (60 * 60));
        diff = diff - (h * 60 * 60);
        var m = Math.floor(diff / (60));
        diff = diff - (m * 60);
        var s = diff;

        $(this).parent().find("div.time-elapsed").html(d + " day(s), " + h + ":" + m + ":" + s);
    });
}

setInterval(updateClock, 1000);

如您所见，我不仅使用类 time-elapsed 来更新时间，而且我爬到父级并从父级（即 ）我找到了 .time-elapsed 类的 div并更新它。

Answer 2

问题出在

$('.date_start_time').attr('data-date-time')

该类有多个元素，因此 attr 始终返回第一个的值。

修改 updateClock 函数以接受元素作为参数。然后做：

$(".tasks li").each(function (idx, el){
   var timeElasped = $(this).find(".time-elapsed");
   var startTime = $(this).find(".date_start_time");
   setInterval( function() { 
       updateClock(startTime, timeElasped); 
   }, 500 );

});