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

Question

你好，我正在构建一个时间跟踪应用程序，我在数据库中保存了一堆开始日期和时间，如果没有结束时间，我将使用此 Whosebug 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

问题在

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

class 有多个元素，所以 attr 始终是第一个的 returns 值。

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

});

Answer 2

您遇到的问题是您有 2 个具有相同 class 名称的元素，并且您在运行应该运行时对所有元素仅执行一次函数为具有该 class 名称的每个元素设置函数。看看你的错误

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

如您所见，我不只是使用 class time-elapsed 来更新时间，但我爬上父级并从 < l i > 父级爬升，我发现 div 与 class .time-elapsed 并更新它。

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

javascript count up from start date and time, multiple targets

javascript

jquery

counter