Question

How can I make the snow clear after a certain time. I’ve tried using variables and the calling a timeout which switches on to false and stops the makesnow() function but that doesn’t seem to clear the page at all.

<script language="javascript">


ns6 = document.getElementById;
ns  = document.layers;
ie  = document.all;


/*******************[AccessCSS]***********************************/
function accessCSS(layerID) {                                                                   //
  if(ns6){ return document.getElementById(layerID).style;}     //
   else if(ie){ return document.all[layerID].style; }         //
    else if(ns){ return document.layers[layerID]; }          //
}/***********************************************************/


/**************************[move Layer]*************************************/
function move(layer,x,y)  { accessCSS(layer).left=x; accessCSS(layer).top = y; } 


function browserBredde() {
    if (window.innerWidth) return window.innerWidth;
    else if (document.body.clientWidth) return document.body.clientWidth;
    else return 1024;
}

function browserHoyde() {

        if (window.innerHeight) return window.innerHeight;
        else if (document.body.clientHeight) return document.body.clientHeight;
        else return 800;
}

function makeDiv(objName,parentDiv,w,h,content,x,y,overfl,positionType)
{     
      // positionType could be 'absolute' or 'relative'

        if (parentDiv==null) parentDiv='body';

    var oDiv = document.createElement ("DIV");
    oDiv.id = objName;

        if (w) oDiv.style.width = w;
        if (h) oDiv.style.height= h;


      if (content) oDiv.innerHTML=content;
      if (positionType==null) positionType="absolute";
        oDiv.style.position = positionType;
        if (x) oDiv.style.left=x; else oDiv.style.left=-2000;
        if (y) oDiv.style.top=y; else oDiv.style.top=-2000;


        if (overfl) oDiv.style.overflow=overfl; else oDiv.style.overflow="hidden";
    eval('  document.'+parentDiv+'.appendChild (oDiv);  ');

    delete oDiv;
}

var snowC=0;
var x = new Array();
var y = new Array();
var speed = new Array();
var t=0;
var cC = new Array();
var ra = new Array();



function makeSnow() {
    x[snowC] = Math.round(Math.random()*(browserBredde()-60));
    y[snowC] = 10;
    makeDiv("snow"+snowC,"body",32,32,'<img src="http://i693.photobucket.com/albums/vv296/KIBBLESGRAMMY/CAT/Orange-tabby-cat-icon.gif">');
    speed[snowC] = Math.round(Math.random()*8)+1;
    cC[snowC]=Math.random()*10;
    ra[snowC] = Math.random()*7;
    snowC++;        
}



function moveSnow() {
    var r = Math.round(Math.random()*100);
    if (r>70 && snowC<20) makeSnow();
    for (t=0;t<snowC;t++) {
        y[t]+=speed[t];move("snow"+t,x[t],y[t]);
        if (y[t]>browserHoyde()-50) {y[t] = 10;x[t] = Math.round(Math.random()*(browserBredde()-60));}
        cC[t]+=0.01;
        x[t]+=Math.cos(cC[t]*ra[t]);

    }

    setTimeout('moveSnow()',20);
}

moveSnow();



</script>

Answer 1

makeSnow just adds the snowflakes. Stopping that, as you say, does not clear anything. moveSnow handles the animation, and calls itself at a timeout. If instead of setting a timeout for the next moveSnow each time, you set it up to run in an interval just once, you would have an easier time stopping it.

window.snowAnimation = window.setInterval(moveSnow, 20);

If you add a css class to your snow flakes, it would be easier to target them for deletion.

oDiv.className = 'snowflake';

Then your clear function could look something like:

function clearSnow() {
   window.clearTimeout(window.snowAnimation);
   var flakes = document.getElementsByTagName('snowflake');
   for(var i = 0, l = flakes.length; i < l; i++) {
      document.body.removeChild(flakes[i]);
   }
}