如何動態設置輸入隱藏值作為計數計時器的值？

Question

基本上我有一個計時器javascript代碼，但是它是一個累加代碼，因此當它停止並且clearInterval（timer）運行時，我想通過timer的值來動態隱藏我的輸入。

例子是：

當計數達到5並停止時，我想使輸入隱藏為5。這可能嗎？

原因是：我想根據時間制作基本的記分牌。 使用此值，人們的分數記錄為秒。 那就是我的想法。

JS代碼是：

var sec = 0;

function pad(val) {
    return val > 9 ? val : "0" + val;
}
var timer = setInterval(function () {
    document.getElementById("seconds").innerHTML = pad(++sec % 60);
    document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10));
    {if ($("#character").is(':hidden'))
{    clearInterval(timer);
}}
}, 1000);

setTimeout(function () {
    clearInterval(timer);
}, 60000);

HTML代碼是：

  <form action="kayit.php">
  Ismini gir : <input type="text">
  <input id="score" type="hidden" value="I want that value changed dynamically as second." >
  <input type="submit" value="Onayladim">

感謝您的回答。

Answer 1

您可以通過將隱藏輸入的值分配給其value屬性來修改其值。

document.getElementById('score').value = Number(document.getElementById("seconds").innerHTML) + (Number(document.getElementById("minutes").innerHTML) * 60);

盡管您最好在計時器啟動時更新該值。

請注意，setInterval不夠精確，因此不能保證每1000毫秒精確調用一次。

編輯---這是一個小提琴，可以幫助您https://jsfiddle.net/ftp1Lsjt/

 var sec = 0; function pad(val) { return val > 9 ? val : "0" + val; } var timer = setInterval(function () { document.getElementById("seconds").innerHTML = pad(++sec % 60); document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10)); {if ($("#character").is(':hidden')) { //clearInterval(timer); document.getElementById('score').value = Number(document.getElementById("seconds").innerHTML) + (Number(document.getElementById("minutes").innerHTML) * 60); }} }, 1000); setTimeout(function () { clearInterval(timer); }, 60000); 

 #character{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id='seconds_wrap'> <span id='seconds'></span> Seconds </div> <div id='minutes_wrap'> <span id='minutes'></span> Minutes </div> <div id='character'> </div> <form action="kayit.php"> Ismini gir : <input type="text"> <input id="score" type="hidden" value="I want that value changed dynamically as second." > <input type="submit" value="Onayladim"> </form>