Sweepstakes, Marquee

Share your own writing of the marquee raffle.

1 2 3 8 4 7 6 5

Effect

Css

    <style type= "Text/css" >        # tbroundel        {         width:210px;        height:210px;                     }    # tbroundel td    {        width:70px;         height:70px;         text-align:center;                 }         #RunDraw          {         padding:0;             text-align:center;            }          #RunDraw  input       {            width:100%;            height:100%;           margin:0;            background-color:Red;            }        </style >

JS algorithm

    <script type= "Text/javascript" >         var t; ///use it to store setinterval, do not buckle too thin, because as long as the use of setinterval and finally need to use       Window.clearinterval (t); to release him         var index = 1;///// This is used to record the current number of cycles, such as the point of the lottery to turn four laps, each turn a lap there are 8 prizes, then there will be a total cycle 8* laps         var circles Number of laps to turn in  = 1;////lottery         var currentcircles =  The 1; ///record is currently the second parameter of the first laps of SetInterval and is manipulated to achieve a variable speed         var speed  = 0;/////the speed of rotation, use it as a         var endpoint = 0;  /////Last stop position, that is, who selected         ////draw start          function startup ()  {        /// Click on the Draw button to disable &NBSP;&NBSP;&NBSP;&NB during the lotterySp;        document.getelementbyid ("Btnrun"). Disabled = true         /////random generation of laps, to run a few laps, not too little, too little to look at the uncomfortable. This is the random integer generated within 4-14             circles =  Math.Round (Math.random ()  * 10 + 3);             /////endpoint, generate a random number within 1-8 because you have 8 prizes in a lap              endpoint = math.round (Math.random ()  * 8);               ////current number of laps              currentcircles = 1;             ////speed, who's too high will be very slow             speed  = 700;            ////number of current cycles              index =1;     /////get an array of <td> to put prizes              var goods = document.getelementsbyname ("Roundelgoods" );             ////storage <td> array of prizes              var drawturn = [];             ////traversal added to Drawturn array              for  (var i = 0; i < (8);  i++)  {                //  document.getelementbyid ("Turn"  +  (i + 1)) .style.border =  "0";                 ////add their style to the original style when added                  document.getelementbyid ("Turn"  +  ( i + 1)) .style.fontsize =  "Large";                 document.getelementbyid ("Turn"  +  (i + 1)). style.color =  "BLACK";                 ///push method, appends an element to the array              Drawturn.push (document.getElementById ("Turn" + (i+1)));        }      ////start Cycle        t= setinterval (HighTurn,speed);    }   ///Cycle Prize Method     function highturn ()  {     /////if the currentNumber of cycles greater than 1, the current loop description is not 1th prize, that's it. The first sibling of the prize is set to the initial value         if  (index &NBSP;&GT;&NBSP;1)  {        ///// Of course, if the index is divided by 8 to 1 then the explanation is at least one loop at the end of the cycle and is just circulating to the prize number 1th, which can not be used (array subscript-1) method to clear the style, because his former is the last cycle of the 8th prize              if  ((index % 8)  == 1)  {               //   document.getElementById ("Turn8") .style.border =  "0                 document.getelementbyid ("Turn8") .style.fontsize =  "  large ";                 document.getElementById ("Turn8") .style.color =  "BLACK";             }            ////if it's not, just say it, straight (array subscript-1) Clear style               else {                 //document.getelementbyid ("Turn"  +  (index -  (8 *  (currentcircles - 1)))  - 1)) .style.border =  "0";                 document.getelementbyid ("Turn"  +  (index -  (8 *   (currentcircles - 1))  - 1) .style.fontsize =  " large";                 document.getelementbyid (" Turn " +  ((index -  (8 *  (currentcircles - 1))  - 1)). style.color =  "BLACK";              &nBsp;//  document.getelementbyid ("Turn"  +  (index -  (8 *  ( currentcircles - 1)) ( - 1)) .style.border =  "3px solid  #ccc";             }          }         ////after finishing the style of the previous item, change the style of the current prize--large font, red          document.getelementbyid ("Turn"  +  (index -  (8  *  (currentcircles - 1))) .style.fontsize =  " xx-large";         document.getelementbyid ("Turn"  +  (index -  (8 *  ( currentcircles - 1))) .style.color =  "Red";        /// After that, the number of cycles divided by 8 is 0, if zero indicates that the cycle has reached the last prize, and then the next lap is entered (no need to consider the first loop because the initial value of index is 1,1/8 not 0)          if  (index % 8)  == 0)  {       //  Enter the next lap to get the current number of laps +1             currentcircles++;         }        ///then Loop +1, don't put it in front of the number of laps plus 1.         index++;        /// Here is used to change the speed, under the rule is set in the first lap is each pass a prize then speed +80,setinterval The second parameter is how long time to execute the meaning, so the smaller the value, the higher the frequency of execution          if  (currentcircles == 1)  {             ///notice, I just because did not write this sentence was stuffy long time, do not write his words your program will always run setinterval can not release. Because changing the parameters of the setinterval to get him into effect would have to be re-executed (I don't know, but try it so). So first clear the previous             window.clearinterval (t);              ///Change Speed              speed -= 80;              ///is re-executing               t = setinterval (highturn, speed);          } The          ///starts to slow down at the last lap at the end of the set           else if  (currentcircles == circles )  {              window.clearinterval (t);              speed += 80;              t = setinterval (highturn, speed);          }         ////is used to determine if the cycle is over, If the current lap = = number of laps to loop, and the current loop to the prize numberThe = = Endpoint is determined to be the end of the loop and will eventually stop at the endpoint location of the prize          if  (circles ==  currentcircles &&  ((index - 1)  % 8)  == endpoint)  {              ///Clear setinterval              window.clearinterval (t);              ///Reply button Use               document.getelementbyid ("Btnrun") .disabled = false;              alert ("Congratulations on the  + endpoint"  +  "No prizes");             return;          }             }    </script> 

Sweepstakes, Marquee