如何在 html div 的代码中显示 javascript 计时器？

Posted 2023-02-25

【中文标题】如何在 html div 的代码中显示 javascript 计时器？

【英文标题】：How do I show the javascript timer in my code in an html div?

【发布时间】：2020-09-15 17:00:19

【问题描述】：

我有一个简单的计时器，可以为测试计时，效果很好

$(document).ready(function() 
    var varTimerInMiliseconds = 3000;
    setTimeout(function() 
        document.getElementById("cntnt01moduleform_1").submit();
    , varTimerInMiliseconds);
);

但是，我还想向参加考试的学生显示倒计时。如何将计时器本身传递到 ID 为 id="testTimer" 的 div 中，如何将计时器转换为分钟和秒而不是毫秒？

【问题讨论】：

***.com/questions/21294302/…

***.com/questions/20618355/…

【参考方案1】：

此代码可让您从 5 倒计时到 1 并打印到 testTimer div。

<div id="testTimer"></div>

JS代码

function Timer() 
  var counter = 10;
  var myTimer = setInterval(function() 
    document.getElementById("testTimer").innerhtml = counter;
    counter--;
    if (counter < 0) 
      clearInterval(myTimer);
      document.getElementById("testTimer").style.color = "red";

      // do anything then time is up. ex: submit() function
      document.getElementById("cntnt01moduleform_1").submit();
    
  , 1000);

Timer();

如您所见，无需通过乘法将毫秒转换为秒。您只需在 1000 毫秒内更新一次秒数。 JS Feedle

【讨论】：

添加到这里，你可以在这里找到倒计时的时间转换的细目w3Schools How TO - javascript Countdown Timer

太好了 - 谢谢大家。但是我如何将它与我拥有的现有代码联系起来呢？在现有代码中，它正在做的两件事是.. 1. 以毫秒为单位花费时间（这是在其他地方设置并调用的，所以我没有选择它是秒，它将是毫秒。2。在倒计时结束时提交表单。我看不到如何使用 Giorgi 在我的代码中显示的代码 - 即同时执行提交和显示，并从毫秒完成。

嗨@JohnSpartacusScotcher，感谢您更新您的请求。我还更新了代码并评论了您也可以添加一些其他功能的地方。此外，您现在可以从 10 倒计时到 0，最后一个 0 数字也会变成红色。如果这是您需要获取的代码，请考虑接受。

太好了，Giorgi - 非常感谢。我现在可以正常工作并倒计时。 （我将我所拥有的毫秒数转换为脚本之外的秒数）> 理解如何做的最后一件事是如何以毫秒和秒为单位显示计时器。例如。 90 秒将从 1:30（分钟和秒）而不是 90 开始倒计时。再次感谢。 :-)

我一般用除法或模函数。试试这个：***.com/questions/21294302/…