MY Loop
       

        //  At window loading, be good to have some .className  
        // set on the DIV elements which require them, so they show up.
        var ScaryMonster = window.onload=function portofOrigin(){
        Div1ne.className ="AsBeforeBubba";
        Div2wo.className ="AsBeforeBubba";
        Div3hree.className ="AsBeforeBubba";
        Div4our.className ="AsBeforeBubba";
        Div5iver.className ="AsBeforeBubba";
        };
        //  Then go ahead and define a shwack of functions the DIVS will
        //  be manipulated by through the action of the LOOP code.
        // functions:  ItemBar1
        function ItemBar1COLOUR(){
        timeoutIDxDiv1 = window.setTimeout(Div1neDOsomethingDoggoneIt, 160);
        }
        function Div1neDOsomethingDoggoneIt(){
            Div1ne.className ="springME";
        Div2wo.className ="defaultBORED";
        Div3hree.className ="defaultBORED";
        Div4our.className ="defaultBORED";
        Div5iver.className ="defaultBORED";
        }
        // functions:  ItemBar2
        function ItemBar2COLOUR(){
        timeoutIDxDiv2 = window.setTimeout(Div2woDOsomethingDoggoneIt, 320);
        }
        function Div2woDOsomethingDoggoneIt(){
        Div1ne.className ="defaultBORED";
            Div2wo.className ="springME";
        Div3hree.className ="defaultBORED";
        Div4our.className ="defaultBORED";
        Div5iver.className ="defaultBORED";
        }
        // functions:  ItemBar3
            // here the Timer Function is defined for the Item #3 of the set of the Loop
        function ItemBar3COLOUR(){
            // it is set to fire, if called, at 480/800 milliseconds    
        timeoutIDxDiv3 = window.setTimeout(Div3hreeDOsomethingDoggoneIt, 480);
        }
            // This, is the Function which contains the code which  
            // will be run if Item #3 is called.
        function Div3hreeDOsomethingDoggoneIt(){
            // .defaultBORED is the *non~lit~up* state of appearance  
            // of the divs while the loop is running.  
        Div1ne.className ="defaultBORED";
        Div2wo.className ="defaultBORED";
            // while .springME is the *active* display appearance  
            // of the div during"animation loop*
            Div3hree.className ="springME";
        Div4our.className ="defaultBORED";
        Div5iver.className ="defaultBORED";
        }
        // functions:  ItemBar4
        function ItemBar4COLOUR(){
        timeoutIDxDiv4 = window.setTimeout(Div4ourDOsomethingDoggoneIt, 640);
        }
        function Div4ourDOsomethingDoggoneIt(){
        Div1ne.className ="defaultBORED";
        Div2wo.className ="defaultBORED";
        Div3hree.className ="defaultBORED";
            Div4our.className ="springME";
        Div5iver.className ="defaultBORED";
        }
        // functions:  ItemBar5
        function ItemBar5COLOUR(){
        timeoutIDxDiv5 = window.setTimeout(Div5iveDOsomethingDoggoneIt, 800);
        }
        function Div5iveDOsomethingDoggoneIt(){
        Div1ne.className ="defaultBORED";
        Div2wo.className ="defaultBORED";
        Div3hree.className ="defaultBORED";
        Div4our.className ="defaultBORED";
            Div5iver.className ="springME";
        }

        /*        ******************************************    */
        //  This is the BEGIN POINT of the Main Timer Loop To create the faux~animation
        function SetThemUP(){

        // This Function creates a TIMESTAMP anywhere you wish to
        // place one, by calling the function.
        function JustTIMEstamp(){
            var OkayFIRE = +new Date();
           return OkayFIRE;
        }

        //  For Whatever reason this works as a holder for a whole lot of functions
        function wellrelaxCODEworkWITHmeHere(){

        //  The first item in this Function collection, is a TimeStamp.  
        //  Obtained by calling a Function which has code to make one.
        var newOkayFIRE = JustTIMEstamp();

        //  1 of 4 Functions needed to build a friggin' <br />.
        //       It is a Function which when called, appends the
        // assembled  LB to the DOM as a child of the target DIV element.
        function SoWriteTimeStampToDivYello(){
            var myDiv1 = document.getElementById("Aaaiyeeah");
            var YellowTitleWrite = myDiv1.appendChild(document.createTextNode(newOkayFIRE));
            return YellowTitleWrite;
        }

        //  2 of 4. sic.  it needs to create a discrete html element...  
        //  the one referrenced above.
        function FancyShitForLBWIN1(){
            var compLbr="var inTheLinebreaks";
            var thirdcompOFintheLinebreaks ="=document.createElement('br');";
            var AssembledDocCreateLB=(compLbr+ thirdcompOFintheLinebreaks);
            return AssembledDocCreateLB;
        }

        //  3 of 4. sic. and surprisingly, only works by directly  
        // inserting a line break onto the variable being
        //  cobbled together to provide a recycleable <br /> construct...
        function middleware(){
            var myDiv33 = document.getElementById("Aaaiyeeah");
            var inTheLinebreaks7=document.createElement('br');
            myDiv33.appendChild(inTheLinebreaks7);
        }

        //  4 of 4  and the final component for the asset  
        //"reuseable <br />" which can be deployed in DIV"Aaaiyeeah" ONLY
        //  but of course, as many times as required, so at least it is useful.
        function FancyShitForLBWIN2wo(){
            var theAppending1stPart="myDiv42.appendChild(";
            var varNameProper=("inTheLinebreaks");
            var fouthPart=");";
            var assembleAppenderHerself=(theAppending1stPart + varNameProper +               fouthPart);
            return assembleAppenderHerself;
        }

        //  Oh, LookitThet, here it is, getting called.  
        //  So, this is inside the wrapper Function, inside the TIMER Loop.
        //  Which has the effect that each time the LOOP gets called,  
        // a record of the TIMESTAMP GO~Time is written out to display.
        SoWriteTimeStampToDivYello();
        FancyShitForLBWIN1();middleware();FancyShitForLBWIN2wo();  //LINEBREAK

        //  wellrelaxCODEworkWITHmeHere() end of function:
        }

        // then call all of em at one shot here:
        wellrelaxCODEworkWITHmeHere();

        // these are the calling of the 5ive functions which are defined OUTSIDE of the       MainTimerLoop; the STEPS or Components,
        // from which the LOOP is assembled.
        ItemBar1COLOUR();
        ItemBar2COLOUR();
        ItemBar3COLOUR();
        ItemBar4COLOUR();
        ItemBar5COLOUR();

        // here is a call to the function in which the call is contained.
        // By Setting the number, the number of milliseconds of the  
        // duration of the Loop Timer, is established.
        //        Therefore
        // In order to have an even event duration, the events have got  
        // to be timed, themselves, in a ratio of their number
        // to the length of time in milliseconds, which the Loop will Occupy.
        CommenceAnnoyance = window.setTimeout(SetThemUP,800);

        // SetThemUP() end of MAIN TIMER Loop :: psuedo~animation
        }
        /*  **********************    */
        /*  *********************************    */




        // Here begins parts of CODE suggested by Gordon.
        // while this is called by the *Reset* button to reset the divs  
        // to their *Loop=OFF* appearance, AND clear the text
        // from the DIV which displays one after another, the  
        // GoTime of the PerLoop Iterations of the MAIN LOOP.
        function DestroyTheMonster() {
            Stop();
            Reset();
            FTWxAnotherReset();   //  that is a kludgy desperation~ploy
                                    // to try to get rid of the unwanted .class
                          //  which is still applied, and to reset all  
                                // 5ive to the NON~running state... appearance.
        }

        // This is the    *** OFF SWITCH ***    for the MainTimerLOOP.
        function Stop() {
            window.clearTimeout(CommenceAnnoyance);
        }


        function Reset() {
            var Aaaiyeeah = document.getElementById('Aaaiyeeah');
              while (Aaaiyeeah.firstChild) {
                Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
            }
            Div1ne.className ="AsBeforeBubba";
            Div2wo.className ="AsBeforeBubba";
            Div3hree.className ="AsBeforeBubba";
            Div4our.className ="AsBeforeBubba";
            Div5iver.className ="AsBeforeBubba";
        }

        function FTWxAnotherReset() {
            var Aaaiyeeah = document.getElementById('Aaaiyeeah');
              while (Aaaiyeeah.firstChild) {
                Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
            }
            Div1ne.className ="AsBeforeBubba";
            Div2wo.className ="AsBeforeBubba";
            Div3hree.className ="AsBeforeBubba";
            Div4our.className ="AsBeforeBubba";
            Div5iver.className ="AsBeforeBubba";
        }


       


       
       
       

        #TitleGhost{
            position:absolute;
            top:11px;
            left:295px;
            width:496px;
            height:29px;
            background-color:#8ADFFB;
            font-size:19px;
            font-weight:bold;
            font-style:italic;
            font-variant:small-caps;
            color:black;
            border:3px solid navy;
            padding-top:3px;
        }  
        #ControlPlace{
            position:absolute;
            top:11px;
            left:19px;
            width:142px;
            height:42px;
            background-color:#33EFEA;
            border:2px solid buttonface;
        }
        #ControlPlace button{
            position:absolute;
            top:6px;
            left:13px;
            width:112px;
            height:29px;
            background-color:buttonface;
            font-family:bookman old style;
            font-size:12px;
            font-weight:bold;
            color:navy;
        }
                #ControlPlaceSTOPPA{
            position:absolute;
            top:72px;
            left:19px;
            width:142px;
            height:42px;
            background-color:#33EFEA;
            border:2px solid buttonface;
        }
        #ControlPlaceSTOPPA button{
            position:absolute;
            top:6px;
            left:13px;
            width:112px;
            height:29px;
            background-color:buttonface;
            font-family:bookman old style;
            font-size:12px;
            font-weight:bold;
            color:navy;
        }
        #Aaaiyeeah{  /*Displays Unix TimeSTAMP of Each Loop Begin~Time*/
            position:absolute;
            top:11px;
            left:819px;
            width:131px;
            height:430px;
            background-color:#C79C96;    /*  Impious Colours ="the lost art"   */
            color:#A48F04;  /*  Impious Colours ="GoldyGoldfish"   */
            border:2px solid black;
            overflow-y:scroll;
        }
        /* Main Display Box  */
        #BeginLoopingLikeAMadBastard{
        position:absolute;
        top:137px;
        left:295px;
        width:492px;
        height:298px;
        background-color:#333333;
        border:5px solid purple;
        }
        /* 5 Divs In the main display  */
        #Div1ne.defaultBORED{
            position:absolute;
            top:12px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div1ne.springME{
            position:absolute;
            top:12px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div2wo.defaultBORED{
            position:absolute;
            top:61px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div2wo.springME{
            position:absolute;
            top:61px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div3hree.defaultBORED{
            position:absolute;
            top:110px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div3hree.springME{
            position:absolute;
            top:110px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div4our.defaultBORED{
            position:absolute;
            top:159px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div4our.springME{
            position:absolute;
            top:159px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div5iver.defaultBORED{
            position:absolute;
            top:208px;
            left:11px;
            width:112px;
            height:29px;
        }
        #Div5iver.springME{
            position:absolute;
            top:208px;
            left:11px;
            width:112px;
            height:29px;
        }

        #Div1ne.AsBeforeBubba{
            position:absolute;
            top:12px;
            left:11px;
            width:112px;
            height:29px;
            background-color:#EEff78;
            border:2px solid #FC3B03;
        }
        #Div2wo.AsBeforeBubba{
            position:absolute;
            top:61px;
            left:11px;
            width:112px;
            height:29px;
            background-color:#EEff78;
            border:2px solid #FC3B03;
        }
        #Div3hree.AsBeforeBubba{
            position:absolute;
            top:110px;
            left:11px;
            width:112px;
            height:29px;
            background-color:#EEff78;
            border:2px solid #FC3B03;
        }
        #Div4our.AsBeforeBubba{
            position:absolute;
            top:159px;
            left:11px;
            width:112px;
            height:29px;
            background-color:#EEff78;
            border:2px solid #FC3B03;
        }
        #Div5iver.AsBeforeBubba{
            position:absolute;
            top:208px;
            left:11px;
            width:112px;
            height:29px;
            background-color:#EEff78;
            border:2px solid #FC3B03;
        }

        /*  defining some .classNames, for some css statements controlled
         by the JavaScript          */
        #Div1ne.springME{
            background-color:forestgreen;
            border:4px solid red;
        }
        #Div2wo.springME{
            background-color:forestgreen;
            border:4px solid red;
        }
        #Div3hree.springME{
            background-color:forestgreen;
            border:4px solid red;
        }
        #Div4our.springME{
            background-color:forestgreen;
            border:4px solid red;
        }
        #Div5iver.springME{
            background-color:forestgreen;
            border:4px solid red;
        }


        #Div1ne.defaultBORED{
            background-color:#333333;
            border:2px solid white;
        }
        #Div2wo.defaultBORED{
            background-color:#333333;
            border:2px solid white;
        }
        #Div3hree.defaultBORED{
            background-color:#333333;
            border:2px solid white;
        }
        #Div4our.defaultBORED{
            background-color:#333333;
            border:2px solid white;
        }
        #Div5iver.defaultBORED{
            background-color:#333333;
            border:2px solid white;
        }

       

       
       
           
        Commence !!!
           
        Stop Madness!
           

        &nbsp&nbspThis Is JavaScript.&nbsp&nbspLooping OR at Least Pretending To.

function DestroyTheMonster() {
    Stop();
}

function Takes2woToTaengo() {
    Stop();
    setTimeout("Reset()", 800); // this is the delay
}

function Stop() {
    window.clearTimeout(CommenceAnnoyance);
}

function Reset() {
    var div = document.getElementById('Aaaiyeeah');
      while (div.firstChild) {
        div.removeChild(div.firstChild);
    }
    Div1ne.className ="AsBeforeBubba";
    Div2wo.className ="AsBeforeBubba";
    Div3hree.className ="AsBeforeBubba";
    Div4our.className ="AsBeforeBubba";
    Div5iver.className ="AsBeforeBubba";
}