如何动态设置输入隐藏值作为计数计时器的值？

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>