xxxxxxxxxx1
2
<main role="main" class="vh-100 p-3">3
<div class="card border shadow-0 h-100">4
<div class="card-body">5
<div class="row gy-3">6
<div>7
<div class="form-outline timepicker" data-mdb-inline="true" data-mdb-format24="true">8
<input type="text" class="form-control" />9
<label class="form-label">Select a time</label>10
</div>11
</div>12
<div class="col-6 col-sm-5 col-md-4 col-lg-3 col-xl-2 col-xxl-1">13
<input type="hidden" value="0" id="inputHH" />14
<div class="d-flex flex-column gap-3">15
<button class="btn btn-secondary" onclick="incHH();">16
<i class="fa-solid fa-plus"></i>17
</button>18
<div class="ratio ratio-1x1">19
<table>20
<tr>21
<td22
class="border text-center fs-1 d-table-cell align-middle"23
id="HH"24
>25
0026
</td>27
</tr>28
</table>29
</div>30
<button class="btn btn-secondary" onclick="decHH();">31
<i class="fa-solid fa-minus"></i>32
</button>33
</div>34
</div>35
<div class="col-6 col-sm-5 col-md-4 col-lg-3 col-xl-2 col-xxl-1">36
<input type="hidden" value="0" id="inputMM" />37
<div class="d-flex flex-column gap-3">38
<button class="btn btn-secondary" onclick="incMM();">39
<i class="fa-solid fa-plus"></i>40
</button>41
<div class="ratio ratio-1x1">42
<table>43
<tr>44
<td45
class="border text-center fs-1 d-table-cell align-middle"46
id="MM"47
>48
0049
</td>50
</tr>51
</table>52
</div>53
<button class="btn btn-secondary" onclick="decMM();">54
<i class="fa-solid fa-minus"></i>55
</button>56
</div>57
</div>58
</div>59
</div>60
</div>61
</main>62
1
1
xxxxxxxxxx1
const stepHH = 1;2
document.getElementById('HH').onwheel = function (ev) {3
const input = document.getElementById('inputHH');4
if (ev.deltaY < 0) input.value -= -stepHH;5
else input.value -= stepHH;6
if (input.value < 0) input.value = 24 - stepHH;7
if (input.value > 23) input.value = 0;8
this.innerHTML = new String(input.value).padStart(2, '0');9
};10
const stepMM = 5;11
document.getElementById('MM').onwheel = function (ev) {12
const input = document.getElementById('inputMM');13
if (ev.deltaY < 0) input.value -= -stepMM;14
else input.value -= stepMM;15
if (input.value < 0) input.value = 60 - stepMM;16
if (input.value > 59) input.value = 0;17
this.innerHTML = new String(input.value).padStart(2, '0');18
};19
function incHH() {20
const input = document.getElementById('inputHH');21
input.value -= -stepHH;22
if (input.value < 0) input.value = 24 - stepHH;23
if (input.value > 23) input.value = 0;24
document.getElementById('HH').innerHTML = new String(input.value).padStart(25
2,26
'0'27
);28
}29
function decHH() {30
const input = document.getElementById('inputHH');31
input.value -= stepHH;32
if (input.value < 0) input.value = 24 - stepHH;33
if (input.value > 23) input.value = 0;34
document.getElementById('HH').innerHTML = new String(input.value).padStart(35
2,36
'0'37
);38
}39
function incMM() {40
const input = document.getElementById('inputMM');41
input.value -= -stepMM;42
if (input.value < 0) input.value = 60 - stepMM;43
if (input.value > 59) input.value = 0;44
document.getElementById('MM').innerHTML = new String(input.value).padStart(45
2,46
'0'47
);48
}49
function decMM() {50
const input = document.getElementById('inputMM');51
input.value -= stepMM;52
if (input.value < 0) input.value = 60 - stepMM;53
if (input.value > 59) input.value = 0;54
document.getElementById('MM').innerHTML = new String(input.value).padStart(55
2,56
'0'57
);58
}59
Console errors: 0