Question

我需要用字符串和倒计时从5到1来更新我的跨度

HTML：

                <div id="timerB" class="timerB"/>
                    <span id="span"></span>
                </div>
                <div id="controls">
                <button type='button' id="b1" onclick="pressBut(this)">Part1</button>

JS：

 var time=6;
 var elem1=document.getElementById('span');
 function startTimer() {

           time=time-1;
           setTimeout(startTimer,1000);
           console.log(time);
       }



        function pressBut(button) {
            if(button.id=='b1'){
                startTimer();
                timerId=setTimeout(function(){
                    vid.currentTime=wave;
                },5000);
                elem1.innerHTML='start in ' + time + ' seconds';
            }

控制台返回var time按预期更改，但屏幕上的span不会。

Answer 1

当您执行pressBut时，它会启动计时器并更改span的内容。在startTimer中，您只更新变量time，而不更新span。因此，您必须添加代码以更新span。

的内容

function startTimer() {
    time=time-1;
    elem1.innerHTML='start in ' + time + ' seconds'; //Update span inner HTML
    setTimeout(startTimer,1000);
    console.log(time);
}

Answer 2

您需要移动以下代码：

elem1.innerHTML='start in ' + time + ' seconds';

喜欢这样

var time=6;
var elem1=document.getElementById('span');
function startTimer() {
           time=time-1;
           setTimeout(startTimer,1000);
           console.log(time);
           elem1.innerHTML='start in ' + time + ' seconds';
 }

 function pressBut(button) {
     if(button.id=='b1'){
          startTimer();
          timerId=setTimeout(function(){
            //vid.currentTime=wave;
          },5000);
     }
 }

<div id="timerB" class="timerB">
     <span id="span"></span>
</div>
<div id="controls">
     <button type='button' id="b1" onclick="pressBut(this)">Part1</button>
</div>

使用计时器编辑span innerHtml

2 个答案: