我想用HTML中的按钮设置时间

Question

我有以下javascript代码，它正常工作，以增加和减少值。

 function increaseH1() { var value = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('H1').value = value; } function increaseH2() { var value = parseInt(document.getElementById('H2').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('H2').value = value; } function increaseM1() { var value = parseInt(document.getElementById('M1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('M1').value = value; } function increaseM2() { var value = parseInt(document.getElementById('M2').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('M2').value = value; } function decreaseH1() { var value = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('H1').value = value; } function decreaseH2() { var value = parseInt(document.getElementById('H2').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('H2').value = value; } function decreaseM1() { var value = parseInt(document.getElementById('M1').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('M1').value = value; } function decreaseM2() { var value = parseInt(document.getElementById('M2').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('M2').value = value; } 

 <div> <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center"> <tr> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseH1()"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseH2()"></td> <td width="10%"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseM1()"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseM2()"></td> </tr> <script src="/assets/triangle.js"></script> <tr> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="H1" type="number" name="timer-on-hour1" value="1" min="0" max="1"></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="H2" type="number" name="timer-on-hour2" value="2" min="0" max="9"></td> <td><h2 class="options"><font size="8">:</font></h2></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="M1" type="number" name="timer-on-minute1" value="5" min="0" max="5"></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="M2" type="number" name="timer-on-minute2" value="9" min="0" max="9"></td> </tr> <tr> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseH1()"></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseH2()"></td> <td></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseM1()"></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseM2()"></td> </tr> </table> </div> 

我遇到的问题是限制输入不超过12:00。

Answer 1

我已更新您的代码以将时间限制为12:00。

 function increaseH1() { var value = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; value++; if(value>1){ value=0; } document.getElementById('H1').value = value; } function increaseH2() { var value = parseInt(document.getElementById('H2').value, 10); value = isNaN(value) ? 0 : value; value++; if(value>9){ value=0; } document.getElementById('H2').value = value; } function increaseM1() { var value = parseInt(document.getElementById('M1').value, 10); value = isNaN(value) ? 0 : value; value++; if(value>9){ value=0; } document.getElementById('M1').value = value; } function increaseM2() { var value = parseInt(document.getElementById('M2').value, 10); value = isNaN(value) ? 0 : value; value++; if(value>9){ value=0; } document.getElementById('M2').value = value; } function decreaseH1() { var value = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('H1').value = value; } function decreaseH2() { var value = parseInt(document.getElementById('H2').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('H2').value = value; } function decreaseM1() { var value = parseInt(document.getElementById('M1').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('M1').value = value; } function decreaseM2() { var value = parseInt(document.getElementById('M2').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('M2').value = value; } function minutLimit(){ var h1 = parseInt(document.getElementById('H1').value, 10); var h2 = parseInt(document.getElementById('H2').value, 10); var c = parseInt(h1+''+h2); console.log(c); if(h2>=9){ return false; }else if(c>=12){ return false; } return true; } 

 <div> <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center"> <tr> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseH1()"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseH2()"></td> <td width="10%"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseM1()"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseM2()"></td> </tr> <script src="/assets/triangle.js"></script> <tr> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="H1" type="number" name="timer-on-hour1" value="1" min="0" max="1"></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="H2" type="number" name="timer-on-hour2" value="2" min="0" max="9"></td> <td><h2 class="options"><font size="8">:</font></h2></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="M1" type="number" name="timer-on-minute1" value="5" min="0" max="5"></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="M2" type="number" name="timer-on-minute2" value="9" min="0" max="9"></td> </tr> <tr> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseH1()"></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseH2()"></td> <td></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseM1()"></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseM2()"></td> </tr> </table> </div> 

Answer 2

 function increaseH1() { var value = parseInt(document.getElementById('H1').value, 10); var H2 = parseInt(document.getElementById('H2').value, 10); value = isNaN(value) ? 0 : value; if(H2 >= 2){ document.getElementById('M1').value = 0; document.getElementById('M2').value = 0; document.getElementById('H2').value = 2; if(value < 1) { value++; document.getElementById('H1').value = value; } } else if(H2 < 2){ if(value < 1) { value++; document.getElementById('H1').value = value; } } } function increaseH2() { var value = parseInt(document.getElementById('H2').value, 10); var H1 = parseInt(document.getElementById('H1').value, 10); var M1 = parseInt(document.getElementById('M1').value, 10); var M2 = parseInt(document.getElementById('M2').value, 10); value = isNaN(value) ? 0 : value; switch(H1){ case 1: if(value < 2) { value++; document.getElementById('H2').value = value; } break; case 0: if(value < 9) { value++; document.getElementById('H2').value = value; } } if(value + H1 == 3 && value < 3){ document.getElementById('M1').value = 0; document.getElementById('M2').value = 0; } } function increaseM1() { var value = parseInt(document.getElementById('M1').value, 10); var H2 = parseInt(document.getElementById('H2').value, 10); var H1 = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; if (H1 + H2 !== 3 && H1 <= 1 || H2 == 3){ if(value < 5) { value++; document.getElementById('M1').value = value; } } } function increaseM2() { var value = parseInt(document.getElementById('M2').value, 10); var H2 = parseInt(document.getElementById('H2').value, 10); var H1 = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; if (H1 + H2 !== 3 && H1 <= 1 || H2 == 3){ if(value < 9) { value++; document.getElementById('M2').value = value; } } } function decreaseH1() { var value = parseInt(document.getElementById('H1').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('H1').value = value; } function decreaseH2() { var value = parseInt(document.getElementById('H2').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('H2').value = value; } function decreaseM1() { var value = parseInt(document.getElementById('M1').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('M1').value = value; } function decreaseM2() { var value = parseInt(document.getElementById('M2').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('M2').value = value; } 

 <div> <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center"> <tr> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseH1()"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseH2()"></td> <td width="10%"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseM1()"></td> <td width="20%"><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="increaseM2()"></td> </tr> <script src="/assets/triangle.js"></script> <tr> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="H1" type="number" name="timer-on-hour1" value="0" min="0" max="1"></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="H2" type="number" name="timer-on-hour2" value="0" min="0" max="9"></td> <td><h2 class="options"><font size="8">:</font></h2></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="M1" type="number" name="timer-on-minute1" value="0" min="0" max="5"></td> <td><input readonly="true" style="font-size:22pt; text-align:center;" id="M2" type="number" name="timer-on-minute2" value="0" min="0" max="9"></td> </tr> <tr> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseH1()"></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseH2()"></td> <td></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseM1()"></td> <td><img class="triangle" src="http://www.trzcacak.rs/file/max/0/7319_square-png.png" onclick="decreaseM2()"></td> </tr> </table> </div>