JavaScript and CSS3 make a carousel draw effect

The first is the HTML code

<p id= "Text" > You have 3 chances left </p><div class= "box" ><div class= "btn BTN1 "></div><div class=" btn2 btn "></div></div>

And then the CSS code.

Body{
padding:0;
margin:0;
}. Box{
width:640px;Height:640px;Border-radius:50%;margin:150px Auto;position:relative; }img{width:100%;Height:100%;Transform:Rotatez (0deg);transition:All 2s; }. BTN{position:Absolute;width:190px;Height:220px;Background-image:URL ("./img/arrow.png");background-repeat:no-repeat;background-position:-30px 0;Top:50%; Left:50%;Margin-left:-95px;Margin-top:-110px; }. BTN2{background-position:-281px 0;Display:None; }P{width:100%;Height:40px;Line-height:40px;text-align:Center;font-size:20px;Color:#facebf; }

Finally add JS code

1         //Initialize an angle2         varx = 0;3         //define how many times a lottery can be drawn4         varA = 3;5         //get the DOM element you want6         varText = document.getElementById ("text");7         varBTN1 = Document.getelementsbyclassname (' btn1 ') [0];8         varBTN2 = Document.getelementsbyclassname (' btn2 ') [0];9         varimg = document.getElementsByTagName (' img ') [0];Ten         //define a random number to use below One         functionRandom (A, b) { A             returnMath.floor (Math.random () * (b-a)) +A;  -         } -         //execute an event when the button is clicked first A-1 then randomly get an angle number and then assign the value to the IMG element and then execute a callback function. If the code inside the callback function is directly put into the bug, but I don't know what the callback function is, there are a couple of lucky draw opportunities  thebtn1.onclick=function(){ -A-=1; -x + = parseint (Random (10, 30) * 60); -Img.style.transform = "Rotatez (" + x + "deg)"; + QQ (a); -  +         } A         functionQQ (x) { atText.innerhtml=' You also have ${x} chance '; -             if(x==0) {//No event is performed if the number equals 0 -Text.innerhtml=' You have 0 more chances '; -btn1.onclick=function(){ -                     return false; -                 } in             } -}

JavaScript and CSS3 make a carousel draw effect