如何使用按钮更改输入值

Question

我有一个表格，希望用户能够使用两个按钮以15分钟为增量设置值。

这是我到目前为止的内容：

<div class="form-group">
    <label class="control-label " for="time">Authorisation Duration</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-clock-o"></i>
        </div>
        <input type="text" class="form-control" id="time" name="time" value="00:00">
        <span class="input-group-btn">
        <button class="btn btn-info" type="button">+ 15 Minutes</button>
        <button class="btn btn-danger" type="button">- 15 Minutes</button>
        </span>
    </div>
</div>

我想知道如何使它根据按下的按钮来更改值。 此外，我如何确保它不会成为负面。

先感谢您。

Answer 1

具有本机函数的示例 （ stepUp()和stepDown() ）：

 function incr() { document.getElementById("myTime").stepUp(15); } function decr() { document.getElementById("myTime").stepDown(15); } 

 Time: <input type="time" id="myTime" value="16:32:55"> <p>Click the button to increment the value of the time field by 10 minutes (each time you click).</p> <button onclick="incr()">+ 15</button> <button onclick="decr()">- 15</button> 

---

一个示例 （使用jQuery）-整数：

 // Set counter default to zero var counter = 0 // Display total $("#counter").text(counter); // When button is clicked $("#add").click(function(){ //Add 10 to counter counter = counter + 15; // Display total $("#counter").text(counter); }); //Subtract $("#subtract").click(function(){ counter = counter - 15; $("#counter").text(counter); }); // Reset $("#reset").click(function(){ counter = 0; $("#counter").text(counter); }); 

 body{ font-size: 1.5em; font-family: 'Oswald', sans-serif; font-weight: 700; } .button_group{ width: 100%; display: flex; } button { font-family: 'Oswald', sans-serif; font-size: 1em; font-weight: 300; border: 0; padding: 1em 2em; margin: 0.5em 0; width: 100%; background: rgba(0,0,0,0.1); -webkit-transition:.2s; } button:nth-child(2){ margin: 0.5em; } button:hover{ background: rgba(0,0,0,0.3); } button:active{ background: rgba(0,0,0,0.5); } #add:active{ -webkit-transform:translateY(-1em); } #subtract:active{ -webkit-transform:translateY(1em); } #counter{ font-size: 3em; text-align: center; width: 100%; display block; background: rgba(0,0,0,0.1); padding: 2em 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter"></div> <div class="button_group"> <button id="subtract">- 15</button> <button id="reset">Reset</button> <button id="add">+ 15</button> </div> 

资料来源：

• CSS技巧
• 很好的例子 （使用Bootstrap和jQuery）
• 例

Answer 2

您可以使用本地html5 time输入：

<input type="time" step="900">

试试吧：

 <input type="time" step="900"> 

缺点是在Firefox和Safari上支持不好，因此您可以将其用作替代方法：

<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="15" step="5">

Answer 3

这应该有帮助

  $(function() { $(".btn-inc").click(function(){ var v = $(this).data("val"); $("#time").val(addMinutes($("#time").val(), v)); }); /*http://stackoverflow.com/questions/13338960/add-20-minutes-in-string-time-and-populate-it-in-the-textbox-or-alert-it*/ function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) { function z(n){ return (n<10? '0':'') + n; } var bits = time.split(':'); var mins = bits[0]*60 + (+bits[1]) + parseInt(minsToAdd); if(mins < 0) return time; return z(mins%(24*60)/60 | 0) + ':' + z(mins%60); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label class="control-label " for="time">Authorisation Duration</label> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-clock-o"></i> </div> <input type="text" class="form-control" id="time" name="time" value="00:00"> <span class="input-group-btn"> <button class="btn-inc btn btn-info" data-val="15" type="button">+ 15 Minutes</button> <button class="btn-inc btn btn-danger" data-val="-15" type="button">- 15 Minutes</button> </span> </div> </div>