Question

我到处寻找，我找不到可以做到这一点的脚本。无论如何，我有两个按钮+/-，他们应该添加或减去输入字段中的分钟。我尝试用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我不知道如何正确添加小时数，我敢打赌有一种更简单的方法，所以请帮助。

Answer 1

首先，您不应该使用内联事件处理程序将事件绑定到dom元素，而是使用jQuery on()。其次，在这样的情况下，跟踪逻辑中的分钟会更容易，然后将该值格式化为小时和分钟以供显示：

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（假设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);

    }
  });

（另外，检查一下你的html结构：你的输入元素周围有一个h1，这有点奇怪，也有一个linka圆。这真的是你的意思吗？）

更新

如果您无法使用html中的分钟设置数据属性，可以使用jQuery设置它：

//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]);
}

使用javascript添加和减去分钟的加号和减号按钮

1 个答案:

更新