[英]How to create a slider that changes numeric values inside two input boxes representing time
我正在嘗試創建一個滑塊來更改表示時間的兩個輸入框的值。
請允許我以圖片為例：
在上圖中，您可以看到每對輸入框對應一個滑塊。
隨着滑塊從左向右移動，每個輸入框內的數值會減少。 這些輸入框代表時間（分別為分鍾和秒）。
你能幫我做這個嗎？ 這是我迄今為止嘗試過的：
<!DOCTYPE html> <html> <body> <label>One Input Box</label><br> <input id="A" type="number" class="occupied" required="" min="1" max="100" onkeyup="if(parseInt(this.value) > 100){ this.value = 100; return false; }" > <br> <input id="MDLslider" class="occupied" type="range" min="0" max="340" oninput="A.value=MDLslider.value"/> <br> <br> <br> <label>Two Input Boxes for Time?</label><br> <input id="D" type="number" class="occupied" placeholder="Minutes" required="" min="1" max="59" onkeyup="if(parseInt(this.value) > 59){ this.value = 59; return false; }" > <input id="E" type="number" class="occupied" placeholder="Seconds" required="" min="1" max="59" onkeyup="if(parseInt(this.value) > 59){ this.value = 59; return false; }" > <input id="TIMEslider" class="occupied" type="range" min="0" max="59" oninput="D.value=TIMEslider.value"/> </body> </html>
以秒為單位測量滑塊值，您可以將分鍾除以 60 並獲得秒的模數
document.querySelector('#TIMEslider').addEventListener('input', function(e) { let mins = e.target.value / 60; let xtra = e.target.value % 60 document.querySelector('#D').value = Math.floor(mins); document.querySelector('#E').value = Math.floor(xtra); })
<label>One Input Box</label><br> <input id="A" type="number" class="occupied" required="" min="1" max="100" onkeyup="if(parseInt(this.value) > 100){ this.value = 100; return false; }"> <br> <input id="MDLslider" class="occupied" type="range" min="0" max="340" oninput="A.value=MDLslider.value" /> <br> <label>Two Input Boxes for Time?</label><br> <input id="D" type="number" class="occupied" placeholder="Minutes" required="" min="1" max="59" onkeyup="if(parseInt(this.value) > 59){ this.value = 59; return false; }"> <input id="E" type="number" class="occupied" placeholder="Seconds" required="" min="1" max="59" onkeyup="if(parseInt(this.value) > 59){ this.value = 59; return false; }"> <input id="TIMEslider" class="occupied" type="range" min="0" max="600" />
在Javascript中，如何使輸入框隨着其中的值發生變化而發生變化？
[英]in Javascript, how can I make input boxes that changes as the values inside them change?
如何使用事件偵聽器實時從兩個輸入框中獲取值並將其存儲在原始 JS 中的變量中？
[英]How to grab values from two input boxes in real time with event listener and store in variables in raw JS?
添加具有多個輸入字段的兩個輸入框值在 jquery 中不起作用
[英]adding two input boxes values with multiple input fields not working in jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.