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

您好，我正在构建一个时间跟踪应用程序，我正在数据库中保存一组开始日期和时间，如果没有结束时间，我将使用此唯一区别的代码，如果我有多个目标，例如，我的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>

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

所以我应该有不同的时间流逝值，知道我做错了什么吗？

问题在这里

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

该类有多个元素，因此attr总是返回第一个元素的值

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

$(".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 );

});

---

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

一,

正如你所看到的，我不只是使用类时间流逝来更新时间，而是爬到父级并从父级

找到类的div.time流逝并更新它

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

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

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