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

我到处都找过了，但我找不到一个可以这样做的脚本。无论如何，我有两个按钮+/-，它们应该在输入字段中加上或减去分钟。我试着用jQuery实现它，但它没有正常工作。。如果有人能给我指出正确的方向

HMTL：

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

函数添加时间（其中）{
var oldTime=$（其中）.val（）；
var contains=oldTime.split（“：”）；
var hours=parseInt（包含[0]，10]；
var minutes=parseInt（包含[1]，10]；
var j=1；
如果（分钟==0）{
返回false；
}
如果（分钟数>0和分钟数<11）{
var值=分钟+j；
值=小时数+'：0'+值；
$（其中）.val（值）；
}
如果（分钟>10）{
var值=分钟+j；
值=小时数+'：'+值；
$（其中）.val（值）；
}
如果（分钟>58）{
小时=小时+1；
var值=小时数+'：0'+j；
$（其中）.val（值）；
}
}

---

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

首先，您不应该真正使用内联事件处理程序将事件绑定到dom元素，而是使用jQuery

on（）

。其次，在这种情况下，更容易在逻辑中跟踪分钟，然后将该值格式化为小时和分钟以显示：

html:

（另外，检查你的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]);
}

---

你的代码可以工作。1:01之后，它会按照它应该的样子运行。是的，我知道只要时间达到1:01，它就会工作，但这就是问题所在，我需要帮助它工作，所以它仍然显示正确的时间。现在它只是将1替换为0。。我知道这是因为它在代码中这么说，但我需要有人帮助我解决这一问题。谢谢，我会尝试一下。是的，h1应该在那里，因为这种设计是为触摸屏显示器设计的，用户需要尽可能大的按钮。在这种情况下，你应该使用CSS来增加

字体大小

——你通常希望将语义（标记/html）、表示（样式/CSS）和行为（JS）分离。

标记有语义含义（标题）-它不仅仅意味着“大文本”，而是使用CSS。同样感谢CSS，我可能会更改它，但现在我正在集中精力让一切正常工作，然后我会检查设计。

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

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

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

    }
  });

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