javascript - 如何使用按钮更改输入的值

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 tricks
• > Good example (使用 Bootstrap 和 jQuery)
• > Example