Question

代码运行良好但我在函数stopCounting()中解决了问题，该函数也删除了<div id ='space'>的子节点。

每当我点击Stop时，它会清除浏览器，但在点击“开始”按钮放置一些值后，它会跳过counter.currValue == 35的值; counter.currValue == 40; counter.currValue == 50并且也不加载图片。

我想在上传图片后清除浏览器。它第一次工作，从第2次起，它跳过值35,40,50和图像。

为何从第二次跳过这些值的任何解释或解决方案？

var buttonStartField = document.getElementById('btn2');
var buttonEndField = document.getElementById('btn1');
var startValueField = document.getElementById('startValue');

buttonStartField.addEventListener('click', startCounting);
buttonEndField.addEventListener('click', stopCounting);

var counter = {
     currValue : 0,
     interval : null
};

 function increment() {

  counter.currValue++;

if (counter.currValue == 35) {
    showImage();
    document.getElementById('counter1').innerHTML = 'Value:'
            + counter.currValue + '</br>';
} else if (counter.currValue == 40) {
    showImage1();
    document.getElementById('counter2').innerHTML = 'Value:'
            + counter.currValue + '</br>';
}
if (counter.currValue == 50) {
    showImage2();
    document.getElementById('counter3').innerHTML = 'Value:'
            + counter.currValue + '</br>';
}

document.getElementById('counter').innerHTML = 'Value:' + counter.currValue
        + '</br>';
  }

function startCounting() {  
  counter.currValue = startValueField.value || 0;
  counter.interval = setInterval(increment, 1000);
 }
    function stopCounting() {
      clearInterval(counter.interval);
      clearContent();
}

 function clearContent(node) {
    var div = document.getElementById('space');
     while (div.hasChildNodes()) {
      div.removeChild(div.firstChild);
     }
  }

HTML

<body>
       <!-- @content --> 
        <div id= "div1">             
                <p id="counter"> </p> 
        </div>  
        <form class="f1">                   

            <input id= "startValue" type="number">
            <input class="button" id = "btn2" type="button" value="Start">
            <input class="button" id = "btn1" type="button" value="Stop">           

        </form>

            <div id="space">
                  <div id="laser"><p id="counter1"></p> </div>                    
                  <div id="laser1"><p id="counter2"></div>
                  <div id="laser2"><p id="counter3"></div>                                      
            </div>

    </body>

通过JavaScript清除浏览器

0 个答案: