Question

我基本上想用javascript倒计时，按照我的逻辑，下面的代码应该可以工作，但是由于未知的原因，它不能工作。有人可以帮我弄清楚代码出什么问题吗？有点烦人。

function startCounter(time)
{
    var counter= document.getElementById("counter").innerHTML;
    var min=0;

    setTimeout(function()
    {
        for(i = 0; i < time; i++)
        {
            document.getElementById("counter").innerHTML = min+ ":" +i;

            if(i == 59) {
                min++;
                i = 0

                document.getElementById("counter").innerHTML = min+ ":" +i; 
            }	
        }
    }, 1000)
};

startCounter(89);

<p id="counter">0:00</p>

Answer 1

您正在创建一个无限循环。

您要包装此部分：

if(i == 59) {
    min++;
    i = 0

    document.getElementById("counter").innerHTML = min+ ":" +i; 
}

在使用i作为限制器的for循环中

。每次i达到59时，您都将其重置为0，然后循环继续。

// Add your code here

function startCounter(time)
{
    var counter= document.getElementById("counter").innerHTML;
    var min = parseInt(time / 60);
    var seconds = time % 60;

    setInterval(function()
    {
         
        seconds++;
         
         document.getElementById("counter").innerHTML = min+ ":" +seconds;

            if(seconds == 60) {
                min++;
                seconds = 0

                document.getElementById("counter").innerHTML = min+ ":" +seconds; 
            }	

    }, 1000)
};

console.log("Start");

startCounter(89);

<p id="counter">

</p>

Answer 2

您有几个可行的选择。从您的setTimeout函数内部再次调用startCounter，或者我最喜欢的方法是window.setInterval。

    var p = document.getElementById("count");
  
  function startTimer(time){
    var num = 0; // the increment number
    var intervalId = window.setInterval(function(){
      num += 1; // increment the number
      if(num == time){
        window.clearInterval(intervalId);
        // you can run your callback here after the timer reached your goal
        startTimer(num + 1); // this just adds a second and restarts the timer as a example
      }
      p.innerText = num;
    }, 1000);
  }
  
  // Start the timer here
  startTimer(10);

<p id="count"></p>

Answer 3

问题出在这一行：

MySite.Web

如果您的时间大于59，则有一个无限循环，因为此行：

for(i=0;i<time;i++) {

由于您的函数从未完成setTimeout从未完成，并且浏览器似乎没有在更新您的元素。

Answer 4

不要将i设置为零，因此for（true）条件始终为true，并且循环不会停止。

import pandas as pd

src = "/opt/repos/pareto/test/stack/data.csv"
df = pd.read_csv(src)


count = 0
def multiply(x):
    res = x.copy()
    keys_len = len(x)
    idx = 1
    while idx + 1 < keys_len:
        left = x[idx]
        right = x[idx + 1]
        new_key = "sub_prod_{}".format(idx)
        # Multiply and round to three decimal places.
        res[new_key] = round(left * right,3)
        idx = idx + 1

    return res

res_df = df.apply(lambda x: multiply(x),axis=1)

function startCounter(time)
{
    var counter= document.getElementById("counter").innerHTML;
    var min=0;

    setTimeout(function()
    {
        for(i = 0; i < time; i++)
        {
            document.getElementById("counter").innerHTML = min+ ":" +i;

            if(i == 59) {
                min++;

                document.getElementById("counter").innerHTML = min+ ":" +i; 
            }	
        }
    }, 1000)
};

startCounter(89);

Answer 5

var timer;
var i = 0;	
var counter = document.getElementById("counter");
var min = 0;
var targetTime = 5;
	
function startCounter(){
	
	if(min < targetTime){
		if(i == 59){
			min++;
			i = "00";
		} else {
			i++;
			if (i < 10) {
				i = "0"+i;
			}
		}
		counter.innerHTML = min + ":" + i;
	} else {
		clearInterval(timer);
	}
	
}

timer = setInterval(startCounter, 1000);

<p id="counter"></p>

Answer 6

您有几个问题...您似乎正在尝试在每秒执行一次的回调中迭代秒。

即使您修复了该代码，也将遇到setTimeout不能以指定值精确地执行的问题。只要线程可以将任务排队>计划的时间，它就会触发。因此，您的计时器将在其持续时间内漂移。

我建议采用以下方法。使用requestAnimationFrame循环（您也可以使用时间间隔）检查JavaScript时钟从开始到now的时间之间的差异，然后打印差异。

var firstTime;
function startTimer(){
  firstTime = Date.now();
  runTimer();
}
function runTimer(){
  var diff = Date.now() - firstTime;//value in milliseconds since the timer started.
  var sec = Math.floor((diff/1000)) % 60;//constrain to seconds
  var min = Math.floor(diff/(1000 * 60));//minutes
  document.getElementById('timer').innerHTML = min + ":"+(String(sec)).padStart(2,"0");
  requestAnimationFrame(runTimer);
}
startTimer();

<div id="timer">0:00</div>

为什么我的计数器功能没有增加？

6 个答案: