时间戳

首页 > 解决方案 > 我想使用innerHTML在屏幕上显示一个计数器，但即使我使用睡眠功能，它也不能循环工作？

javascript - 我想使用innerHTML在屏幕上显示一个计数器，但即使我使用睡眠功能，它也不能循环工作？

问题描述

实际上我想要一个计时器，以便可以从我想要的范围倒计时到 0。但是使用 innerHTML 只会立即显示 0:00 而不会显示更改。我使用了睡眠功能，所以现在屏幕保持不变，然后显示为零，而不是像倒计时怎么办？救命！！！ 

function sleep(t){
   let timeenter code hereStart=new Date().getTime();
     while(true)
      {
       let elapsedTime=new Date().getTime()-timeStart;
       if(elapsedTime>t){
       break;
      }
    }
}

function startLoop(){

  let v1=document.getElementById("minutes-input").value;
  let v2=document.getElementById("seconds-input").value;
  let x1=document.getElementById("minutes");
  let x2=document.getElementById("seconds");

for(var i=0;i<v1;i++)
{
  x1.innerHTML=i;
  console.log(i);
  for (var j =1; j<=59; j++) {
     sleep(1000);
    x2.innerHTML=j;
    console.log(j);
  }
}

标签： javascriptinnerhtml

解决方案

看看这是否有帮助。我知道 CSS 应该在一个外部文件中，但是嘿....所以，它是...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<input type="text" id="minutes-input" value="1">
<input type="text" id="seconds-input" value="10">
<div style="border: 2px solid black; width: 100px; height: 15px;" id="minutes"></div>
<div style="border: 2px solid black; width: 100px; height: 15px;" id="seconds"></div>
<button type="button" onclick="setInterval(updateTime, 1000);">Start counting</button>

<script>
let v1=document.getElementById("minutes-input").value;
let v2=document.getElementById("seconds-input").value;
let x1=document.getElementById("minutes");
let x2=document.getElementById("seconds");

x1.innerHTML = v1;   // starting time in minutes
x2.innerHTML = v2;   // starting time in seconds

function updateTime() {
    x1.innerHTML = v1;
    if(v2 > 0) {
        x2.innerHTML = --v2;
        if(v1 === 0 && v2 === 0) {
          return;                    // stop counting
        }
        if(v2 === 0) {
            v2 = 60
            v1--;
        }
    }  
}
</script>
</body>
</html>

如果我需要解释什么，请问...

推荐阅读