Сравнение 2 раза с jquery

Заранее благодарю за любую помощь...

Я пытаюсь (1) создать время начала и время окончания для формы, (2) найти разницу между ними и (3) добавить разницу к новому вводу.

Вот что у меня есть до сих пор:

<a href="#" id="starttime">Begin time</a>
<input id="starttimeinput" name="starttimeinput" type="text" value="">
<script>
    $("#starttime").click(function () {
         var begintime = event.timeStamp;
         $("#starttimeinput").val(begintime);
    });
</script>
<a href="#" id="endtime">end time</a>
<input id="endtimeinput" name="endtimeinput" type="text" value="">
<script>
    $("#endtime").click(function () {
         var endtime = event.timeStamp;
         $("#endtimeinput").val(endtime);
    });
</script>
<input id="totaltime" name="totaltime" type="text">
<script>
    $("#totaltime").focus(function () {
       var begintime = $("#starttimeinput").val();
       var endtime = $("#endtimeinput").val();
       var totaltime = endtime - begintime;
       $("#totaltime").val(totaltime); 
     });     
</script>

Работает первая часть (ввод меток времени во входы времени начала и окончания). Я никогда раньше не работал с числами и не могу понять вторую часть. В результате появляется "NaN".

Также может быть полезно знать, что время между щелчками по ссылкам должно составлять около 30 секунд...

Большое спасибо за любую помощь, вы, ребята, ответили на так много моих вопросов, и мне не пришлось публиковать сообщения!


javascript jquery time math parseint
person Andrew Samuelsen    schedule 08.02.2011    source источник
comment
Проверьте этот api.jquery.com/event.timeStamp.   -  person gsk    schedule 08.02.2011
comment
Первая часть у меня не работает и даже выдает ошибку. последний ввод получает 0, однако. И если я добавлю параметр события для функций обратного вызова щелчка, все будет работать так, как вы описали.   -  person kirilloid    schedule 08.02.2011

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно parseInt() вернуть время назад, иначе это просто строки (как ответил .val()).

$("#totaltime").focus(function () {
    var begintime = parseInt($("#starttimeinput").val(), 10),
        endtime = parseInt($("#endtimeinput").val(), 10),
        totaltime = endtime - begintime;
    $("#totaltime").val(totaltime); 
 });

Лично я лучше просто буду хранить значения begintime и endtime сам, а не в текстовом вводе (в любом случае, зачем пользователю их видеть?). Как это:

var begintime,
    endtime;
$("#starttime").click(function (event) {
     begintime = event.timeStamp;
     //$("#starttimeinput").val(begintime);
});

$("#endtime").click(function (event) {
     endtime = event.timeStamp;
     //$("#endtimeinput").val(endtime);
});

$("#totaltime").focus(function () {
    $("#totaltime").val(endtime - begintime); 
});

Кстати, я бы рекомендовал перенести ваш код jQuery из встроенных тегов <script> во внешний файл JS. Это делает разметку и JS более удобной в сопровождении. Просто оберните весь ваш JS-код в обработчик готовности документа:

$(document).ready(function () {
    /* your code here */
});

или, более кратко,

$(function () {
    /* your code here */
});
person Matt Ball    schedule 08.02.2011
comment
Спасибо за ответ, но, к сожалению, когда я фокусируюсь, вместо того, чтобы возвращать NaN, он ничего не показывает... - person Andrew Samuelsen; 08.02.2011
comment
@Энди: посмотри мое редактирование. Похоже, вы (и, следовательно, я) пропустили параметр обратного вызова события event. - person Matt Ball; 08.02.2011
comment
Я считаю, что операция минус автоматически преобразует строки в числа. - person David Tang; 08.02.2011
comment
Хорошо... это то, что я искал, большое спасибо, вы чемпион. - person Andrew Samuelsen; 08.02.2011
comment
@ Box9: вы правы, но я не вижу веских причин использовать в этом случае приведение типов вместо истинного синтаксического анализа. Тогда мне интересно, почему ОП увидел NaN... - person Matt Ball; 08.02.2011
comment
@Энди: всегда пожалуйста. Похоже, это был просто отсутствующий параметр: как указал Box9, вы можете уйти, позволив - (оператору вычитания) привести строки к числам. - person Matt Ball; 08.02.2011
comment
У вас есть предложение сделать результат сравнения (т.е. $(#totaltime).val(endtime - begintime);) в свою собственную переменную, чтобы я мог сделать с ней больше... например, сказать что-нибудь, если это больше, чем 30 секунд. Спасибо. Я не понимаю, почему: var totaltime = endtime - begintime не работает. - person Andrew Samuelsen; 08.02.2011
comment
@ Мэтт, да, я тоже не мог понять часть NaN; Я ожидал ошибки. Синтаксический анализ или приведение типа — это вопрос предпочтения, однако имейте в виду, что parseInt(val) будет успешно анализировать 10a как 10, когда, вероятно, должно быть NaN. Вместо этого вы можете использовать Number(val), если предпочитаете явно преобразовывать свои строки;) - person David Tang; 08.02.2011