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

时间：2019-05-09 01:41:42

标签： javascript html

我有以下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。

2 个答案:

答案 0 :(得分：0)

我已经更新了您的代码，以将时间限制为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>

答案 1 :(得分：0)

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>

相关问题
最新问题