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

Question

基本上我有一个计时器 javascript 代码，但它是一个计数代码，所以当它停止并且 clearInterval(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>