鍍金池/ 問(wèn)答/HTML/ 如何讓stopFly函數(shù)起作用？

如何讓stopFly函數(shù)起作用？

js部分

function createOneSnow(){
    var leftX = Math.random()*window.innerWidth;
    var topY = Math.random()*window.innerHeight;
    var snowDiv = document.createElement("div");
    snowDiv.style.position = "fixed";
    snowDiv.style.left = leftX + "px";
    snowDiv.style.top = topY + "px";
    var targetImg= document.createElement("img");
    targetImg.src = 'image/white-snow.png';
    targetImg.style.width = '20px'; 
    snowDiv.appendChild(targetImg);
    document.body.appendChild(snowDiv);
}

function createManySnow(){
    for (var i = 0 ; i < 20 ; i++) {
        createOneSnow();        
    }
}


function startFly(){
    var allSnows = document.getElementsByTagName("div");
    snowLength = allSnows.length;
        for (var i = 0 ; i < snowLength; i++) {
            var randomTop = Math.random()*6;
            allSnows[i].style.top = allSnows[i].offsetTop + randomTop + "px";
            if( allSnows[i].offsetTop % 500 == 0 ) {
               createOneSnow();
            }
            if(allSnows[i].offsetTop > window.innerHeight){
                allSnows[i].remove();
                createOneSnow();
            }
        }
        document.getElementById("startButton").disabled = "disabled";
        document.getElementById("stopButton").disabled = "";
}
 
function stopFly(){
    clearInterval(timer);
    document.getElementById("startButton").disabled = "";
    document.getElementById("stopButton").disabled = "disabled";
}
    
window.onload=function(){
    createManySnow();
    setInterval(startFly,100);
}

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fly</title>
    <link rel="stylesheet" href="p1.css">
    <script src="p1.js"></script>
</head>
<body>
    <audio  loop="loop" autoplay="autoplay">
        <!--        <source src="fly.mp3" type="audio/mpeg" />  -->
            don't surpport the music
    </audio>
    <input type="button" value="新增" onclick="createManySnow();">
    <input type="button" id="startButton"  value="開(kāi)始"  onclick="timer=setInterval(startFly,100)">
    <input type="button" id="stopButton"     value="停止" onclick="stopFly();">
</body>
</html>

網(wǎng)頁(yè)打開(kāi)后，雪花自動(dòng)產(chǎn)生并落下，但是按下 stop鍵，stopFly函數(shù)失靈，估計(jì)是無(wú)法找到 timer,
clearInterval(timer); 無(wú)法執(zhí)行。

請(qǐng)問(wèn)，如何讓onclick="stopFly();" 起作用？

全部代碼,image,本問(wèn)題涉及的源代碼請(qǐng)下載。

回答
編輯回答
墨小白
var timer = null;    
window.onload=function(){
    createManySnow();
    timer = setInterval(startFly,100);
}

大佬，你一開(kāi)始timer都沒(méi)有定義，怎么清掉。按上面加就可以了。

2017年12月23日 01:59
編輯回答
怣痛
var timer;
window.onload=function(){
    createManySnow();
    _startFly();
}
function _startFly(){
    timer=setInterval(startFly,100);
}

-

<input type="button" id="startButton"  value="開(kāi)始"  onclick="_startFly()">
2017年10月9日 04:48