Question

我的倒计时不起作用......它的节目只有10 ..我正在尝试点击一下运行倒数计时器，在H5标题下，它将取代计时器打开，清除保留和透明背景橙色。当它达到小于1时，它会将更改再次更改为默认值。 abc（）是onClick ...的函数

function abc() {
  if (firstTimer = "Open") {

    firstHeading.innerHTML = "Reserved";
    firstT.style.backgroundColor = "#D27900";

    function countDown(secs, elem) {
      var element = document.getElementById(elem);
      element.innerHTML = secs;
      if (secs < 1) {
        clearTimeout(timer);
        element.innerHTML = "Open";
        firstHeading.innerHTML = "Clear";
      }
      secs--;
      var timer = setTimeout('countDown(' + secs + ',"' + elem + '")', 10000);
    }
    countDown(10, "firstTblImageTimer");
  }
}

Answer 1

我认为你对setTimeout如何工作有点困惑，因为你在countdown函数本身内设置了countdown函数的超时，你将不得不等待10秒每次都要执行countdown函数。如果您愿意打印倒计时，我建议您改用setInterval。这是您的解决方案的锅炉板

var secs = 10;
var countdown = function() {
    
	if(secs < 1) {
		clearInterval(myVar);
                // Do something while still counting down
		console.log("Time out!");
	} else {
               // Do something when you reach to zero
		console.log(secs);
		secs--;
	}
}
var myVar = setInterval(countdown, 1000);

我建议您查看Window clearInterval() Method和Window setTimeout() Method W3School页面，以便了解它们的工作原理以及彼此之间的差异，并说明哪种方法可以更好地解决您的问题。

Answer 2

您使用错误的方法来解决此计时器问题，您希望计时器每秒更新一次，因此您的计时器应该每秒调用一次。为了清楚起见，请尝试使每个功能仅具有一个责任，例如下面的代码：

function countDown( secs , elem ) {
    var updateElem =  function(){
        if(secs <= 0){
            elem.innerHTML = "Open";
            firstHeading.innerHTML = "Clear";
        }
        else{
            elem.innerHTML = secs;
        }
    }

    var checkTimeout = function(){
        if(secs <= 0){
        clearInterval(timer);
        }
        else{
            updateElem();
            secs--;
        }
    }

    var timer = setInterval( checkTimeout,1000);
}

请注意我没有查找我的函数中的元素，但是我会在外面找到它并且我可以将这个函数与其他元素一起使用，所以在我的主要函数中我会＆＃39;我会有这样的事情：

var element = document.getElementById("firstTblImageTimer");
countDown(10 , element);

我的Javascript CountDown（）不起作用

2 个答案: