Question

我想根据2个文本字段的动态ID计算时差，并将其显示在第3个字段。

我目前的代码：

function mdiff(t1,t2) { 
    var t1 = hour2mins(t1);  var t2=hour2mins(t2); 
    var ret = mins2hour(parseInt(t2-t1));
  if(t2<t1) {
     ret=mins2hour(parseInt(parseInt(t2+1440)-t1));
  } 
    return ret; 
}

$("input.[rel=diff]").keyup(function (b){ 
   $("#duration").val(mdiff($("#starttime).val(),$("#endtime").val())); 
});

我在代码中使用trent的timepicker插件来生成时间。我该如何计算差异？

fiddle of my existing code

Answer 1

您可以对'timepicker'对象使用'onSelect'事件，如下例所示：



$(document).ready(function() {

    $("#AddRow").click(function() {
        var row = '<tr><td>' + '<input type=text class="timepicker"  value=""/></td>' + '<td><input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="diff"/></td>' + '<td><button>delete</button>' + '</td></tr>';
        $("#table").append(row);

        // id generating for class timepicker starts here
        var i=0;
        $('input.timepicker').each(function(){
            i++;
            $(this).attr("id","timepicker_"+i);
        });
        // ends here
        //trail diff id generator
        var j=0;
        $('input.diff').each(function(){
            j++;
            $(this).attr("id","diff_"+j);
        });
        //ends here

    });

    $('body').on('focus', ".timepicker", function() {
        $(this).timepicker({

            onSelect: function(dateText, instance) {

                // Check for valid values
                if ($('input.timepicker:eq(0)').val() === '' || $('input.timepicker:eq(1)').val() === '') return false;

                var time1 = $('input.timepicker:eq(0)').val().split(/:/),
                    time2 = $('input.timepicker:eq(1)').val().split(/:/);                                      

                    timeDiff(time1[0]*3600 + time1[1]*60, time2[0]*3600 + time2[1]*60);
            }
        });
    });

    $("#table").on("click", "button", function() {
        $(this).closest("tr").remove();
    });
    //table structure ends here
});

function timeDiff(time1, time2) {
    var td = time2 - time1,
        hours = parseInt(td / 3600),
        minutes = parseInt( (td - hours*3600) / 60 ),
        diff = ( (hours < 10 && hours >= 0) ? ('0' + hours) : hours ) + ':' + ( (minutes < 10 && minutes >= 0) ? ('0' + minutes) : minutes );

    $('input.diff').val(diff);
}

$(document).ready(function() { $("#AddRow").click(function() { var row = '<tr><td>' + '<input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="diff"/></td>' + '<td><button>delete</button>' + '</td></tr>'; $("#table").append(row); // id generating for class timepicker starts here var i=0; $('input.timepicker').each(function(){ i++; $(this).attr("id","timepicker_"+i); }); // ends here //trail diff id generator var j=0; $('input.diff').each(function(){ j++; $(this).attr("id","diff_"+j); }); //ends here }); $('body').on('focus', ".timepicker", function() { $(this).timepicker({ onSelect: function(dateText, instance) { // Check for valid values if ($('input.timepicker:eq(0)').val() === '' || $('input.timepicker:eq(1)').val() === '') return false; var time1 = $('input.timepicker:eq(0)').val().split(/:/), time2 = $('input.timepicker:eq(1)').val().split(/:/); timeDiff(time1[0]*3600 + time1[1]*60, time2[0]*3600 + time2[1]*60); } }); }); $("#table").on("click", "button", function() { $(this).closest("tr").remove(); }); //table structure ends here }); function timeDiff(time1, time2) { var td = time2 - time1, hours = parseInt(td / 3600), minutes = parseInt( (td - hours*3600) / 60 ), diff = ( (hours < 10 && hours >= 0) ? ('0' + hours) : hours ) + ':' + ( (minutes < 10 && minutes >= 0) ? ('0' + minutes) : minutes ); $('input.diff').val(diff); }

是的，那是真的。我错过了“添加”按钮，这些选择器可以用于一行。以下是上一代码的更新：

$(document).ready(function() {

    $("#AddRow").click(function() {
        var row = '<tr><td>' + '<input type=text class="timepicker"  value=""/></td>' + '<td><input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="diff"/></td>' + '<td><button>delete</button>' + '</td></tr>';
        $("#table").append(row);

        // id generating for class timepicker starts here
        var i=0;
        $('input.timepicker').each(function(){
            i++;
            $(this).attr("id","timepicker_"+i);
        });
        // ends here
        //trail diff id generator
        var j=0;
        $('input.diff').each(function(){
            j++;
            $(this).attr("id","diff_"+j);
        });
        //ends here

    });

    $('body').on('focus', ".timepicker", function() {
        $(this).timepicker({

            onSelect: function(dateText, instance) {



                var currentInput = ( $(instance.input).length > 0 ? $(instance.input) : $(instance.$input)),
                    nextInput = $(currentInput).closest('tr').find('input.timepicker[id!="' + $(currentInput).attr('id') + '"]');

                // Check for valid values               
                if ($(currentInput).val() === '' || $(nextInput).val() === '') return false;

                var time1 = $(currentInput).val().split(/:/),
                    time2 = $(nextInput).val().split(/:/);

                // switch time
                if ($(currentInput).parents('td').index() > 0) {
                    var temp = time1;
                    time1 = time2;
                    time2 = temp;
                }

                    timeDiff(time1[0]*3600 + time1[1]*60, time2[0]*3600 + time2[1]*60, currentInput);
            }
        });
    });

    $("#table").on("click", "button", function() {
        $(this).closest("tr").remove();
    });
    //table structure ends here
});

function timeDiff(time1, time2, instance) {
    var td = time2 - time1,
        hours = parseInt(td / 3600),
        minutes = parseInt( (td - hours*3600) / 60 ),
        diff = ( (hours < 10 && hours >= 0) ? ('0' + hours) : hours ) + ':' + ( (minutes < 10 && minutes >= 0) ? ('0' + minutes) : minutes );

    $(instance).closest('tr').find('input.diff').val(diff);
}

更新： - “当用户手动输入时间时，有没有办法使这个代码工作？”

里面$（文件）.ready（）;你必须为timepicker输入添加'onblur'事件。以下是一个示例：jsFiddle

如何计算开始时间和结束时间的时间差动态动态id为每一行？

1 个答案: