我有一个带有一些功能的时钟。现在，我从该输入中的时钟中得到结果：
<input class="arrow tag-input tag-input-mobile" type='Number' id='number2' placeholder='7:00 PM' class='qty' max="10" min="0" data-toggle="modal" data-target="#exampleModalTime"/>
我只从时钟中获取值，但我需要基于该值的 PM/AM，如何使用 JavaScript 添加它？
这是我的代码：
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
if (value > 24) {
return
}
document.getElementById('number').value = value;
document.getElementById('number2').value = value;
}
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
document.getElementById('number2').value = value;
}
function maxLengthCheck(object) {
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
function isNumeric(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|./;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}<div class="modal fade" id="exampleModalTime" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="wrapper-clock" id="wrapper">
<div id="navigator">
<div id="calendar">
<div id="daysblock3">
<div class="bottom-items">
<img class="bg-clock" src="images/clock/bg-clock.png">
<img class="left-up" src="images/clock/left-up.png" id="increase" onclick="increaseValue()" value="Increase Value">
<img class="right-up" src="images/clock/right-up.png" id="increaseR" onclick="increaseValueR()" value="Increase ValueR">
<img class="right-down" src="images/clock/right-down.png" id="decreaseR" onclick="decreaseValueR()" value="Decrease Value">
<img class="left-down" src="images/clock/left-down.png" id="decrease" onclick="decreaseValue()" value="Decrease Value">
<img class="line-time" src="images/clock/line.png">
<p class="text-pm">PM</p>
<input class="text-hour" type='Number' id='number' value='7' class='qty' max="10" min="0" maxlength="2" oninput="maxLengthCheck(this)" />
<input class="text-minutes" type='Number' id='numberR' value='00' class='qty' max="10" min="0" maxlength="2" oninput="maxLengthCheckR(this)" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>因此，我只需要在该输入中添加这种文本document.getElementById('number2').value = value;因此，从 0 到 12 应该有 AM，从 13 到 24 应该是 PM。
您也可以使用选择方法。下面是示例：
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" onchange="myFunction()">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
</select>
<p id="Clockresult">0AM</p>
<script>
function myFunction() {
var value = document.getElementById('mySelect').value;
if (value > 12) {
value = value - 12;
document.getElementById('Clockresult').innerHTML = value + "PM";
} else {
document.getElementById('Clockresult').innerHTML = value + "AM";
}
}
</script>
</body>
</html>你需要这样的东西。我允许 24 小时的最大值输入，但在 javascript 中，如果它在 PM 中，我会减去 12 小时。如您所见，可以检查输入的值，而无需将其解析为int。最后，将 PM 或 AM 连接到结果。
function myFunction() {
var value = document.getElementById('number').value;
if (value > 12) {
value = value - 12;
document.getElementById('result').innerHTML = value + "PM";
} else {
document.getElementById('result').innerHTML = value + "AM";
}
}<input type='Number' id='number' max="24" min="0" value="0">
<button onclick="myFunction()">Try it</button><br>
<p id="result"></p>试试这个：
$(document).ready(function(){
$("input").change(function(){
var value = document.getElementById('number').value;
if (value > 12) {
value = value - 12;
document.getElementById('Clockresult').innerHTML = value + "PM";
} else {
document.getElementById('Clockresult').innerHTML = value + "AM";
}
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type='text' id='number'>
<p id="Clockresult">Time</p>
</body>
</html>