0

我到处寻找，但找不到可以执行此操作的脚本。无论如何，我有两个按钮 +/-，它们应该添加或减去输入字段中的分钟数。我试图用 jQuery 来做，但它不能正常工作。如果有人能指出我正确的方向。

HMTL：

<a href="#" class="btn" onclick="SubTime('#input-time')"><h1>&nbsp;<i class="icon-minus"></i>&nbsp;</h1></a>
<a href="#" class="btn"><h1>&nbsp;<input type="text" value="0:50" id="input-time">&nbsp;</h1></a>
<a href="#" class="btn" onclick="AddTime('#input-time')"><h1>&nbsp;<i class="icon-plus"></i>&nbsp;</h1></a>

jQuery（只添加了应该添加时间的函数）：

function AddTime(where) {
 var oldTime = $(where).val();
 var contains = oldTime.split(":");
 var hours = parseInt(contains[0], 10);
 var minutes = parseInt(contains[1], 10);
 var j = 1;

if (minutes == 0) {
    return false;
}

if (minutes > 0 && minutes < 11) {
    var value = minutes + j;
    value = hours + ':0' + value;
    $(where).val(value);
}

if (minutes > 10) {
    var value = minutes + j;
    value = hours + ':' + value;
    $(where).val(value);
}

if (minutes > 58) {
    hours = hours + 1;
    var value = hours + ':0' + j;
    $(where).val(value);
}
}

它没有正确添加小时，现在输入字段值为 0:50，所以当我开始按下 + 按钮时，只要时间为 1:01，它就会一次添加一分钟，然后小时又回到 0： 02. 我不知道如何正确添加时间，我敢打赌有一种更简单的方法可以做到这一点，所以请帮忙。

4

1 回答 1

1

So first things first, you shouldn't really be using inline event handlers to bind events to dom elements, use jQuery on() instead. Secondly, in a case like this it's much easier to track minutes in your logic and then format that value into hours and minutes for display:

html:

<a href="#" class="btn btn-subtract">subtract</a>
<input type="text" value="1:50" id="input-time" data-minutes="110"/>
<a href="#" class="btn btn-add">add</a>

JS (assumes jQuery 1.8+):

  $(function() {// on document ready
    var $input = $('#input-time');//cache the input as a jQuery object (optional)
    //bind events to the buttons
    $('.btn-add').on('click', function(){
      changeTime(1);
    });
    $('.btn-subtract').on('click', function(){
      changeTime(-1);
    });

    function changeTime(mins){
      var currentTime = parseInt($input.data('minutes')), //get the current value from the data attr in the HTML
          newTime = currentTime + mins, //calculate the new time
          minutes = (newTime % 60).toString(), //get the minutes using the modulus operator and convert to a string (so we can use length below)
          hours = (Math.floor(newTime / 60)).toString();// get the hours and convert to a string

      //make sure we've got the right length for the minutes string
      if (minutes.length === 0){
        minutes = "00";
      }
      else if(minutes.length === 1){
        minutes = "0" + minutes;
      }
      //update the data attr and the displayed output
      $input.data('minutes', newTime).val(hours + ":" + minutes);

    }
  });

(also, check your html structure: you had a h1 around your input element, which is a bit odd, and a linka round that too. is that really what you meant to do?)

Update

If you aren't able to set a data attribute with the minutes in your html, you can set it with jQuery like this:

//before you bind your events
$input.data('minutes', parseTimeString($input.val()));

function parseTimeString(str){
  var time = str.split(":");
  return (parseInt(time[0])*60) + parseInt(time[1]);
}
于 2012-10-23T07:38:55.797 回答