Question

在头部：

var countdownTimer;  <br/>
countdownTimer = 45;  <br/>

function makeCountdown() {  <br/>
   countdownTimer = countdownTimer - 1;  <br/>

}

setInterval(makeCountdown, 1000);
<br/><br/>

在页面的正文部分：

document.write(countdownTimer);<br/>

function updateCountdown() {  <br/>
   document.replace(countdownTimer);  <br/>

}
<br/><br/>
setInterval(updateCountdown, 1000);


<br/><br/>

我已经检查过浏览器控制台并且countdownTimer变量每秒都会下降，但我正在努力的是如何实时更新页面上的变量。

我看了很长时间，我在这里或其他地方找不到任何可以帮助我的东西，我也是javascript的新手。非常感谢您的帮助！

Answer 1

更改元素而不是document本身
replace

document

如果持续时间相同，则没有必要设置2个间隔

注意：请务必将script作为body的最后一个孩子放置，否则，DOM api会尝试在DOM准备好之前访问该元素，这将返回null document.getElementById('elem')

的结果

＆＃13;

var countdownTimer;
var elem = document.getElementById('elem');
countdownTimer = 45;

function makeCountdown() {
  countdownTimer = countdownTimer - 1;
  elem.textContent = countdownTimer;
}
setInterval(makeCountdown, 1000);
elem.textContent = countdownTimer;

＆＃13;

<span id='elem'><span>

＆＃13;

Answer 2

Rayon的回答有点补充。在计时器达到0时停止倒计时

＆＃13;

    var timer=45;
    var intervalId;
    function countdown(){	
        $('#elem').text(timer);  
        if(timer==0){
            clearInterval(intervalId);
        }
        timer--;
    }
    intervalId=setInterval(countdown,1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span id="elem"></span>

＆＃13;

在HTML中更新屏幕上的间隔变量

2 个答案: