Tip: you can modify some code before running
<!DOCTYPE html><html><head> <title>Lucky draw</title> <style type="text/css"># Container {width: 400px; height: 400px; position: relative; margin: 0 auto;} # demo {position: absolute; filter: progid: DXImageTransform. microsoft. matrix (sizingmethod = "auto expand ");}</style></head><body > <div id="container"> <div id="demo"> </div> </div> <input id="test" type="button" value="抽奖" /> <input id="restart" type="button" value="再抽一次" /> <div id="msg"> </div> <script type="text/javascript">Var m $ = function (id) {return document. getElementById (id);} var ua = navigator. userAgent; var isIE =/msie/I. test (ua )&&! Window. opera; var I = 1, sinDeg = 0, cosDeg = 0, timer = null; var mRotate = function () {var rotate = function (target, msg) {target = m $ (target); var orginW = target. clientWidth, orginH = target. clientHeight; clearInterval (timer); function run (angle) {if (isIE) {cosDeg = Math. cos (angle * Math. PI/180); sinDeg = Math. sin (angle * Math. PI/180); with (target. filters. item (0) {M11 = M22 = cosD Eg; M12 =-(M21 = sinDeg);} target. style. top = (orginH-target. offsetHeight)/2 + "px"; target. style. left = (orginW-target. offsetWidth)/2 + "px";} else if (target. style. mozTransform! = Undefined) {target. style. Convert transform = "rotate (" + angle + "deg)";} else if (target. style. OTransform! = Undefined) {target. style. OTransform = "rotate (" + angle + "deg)";} else if (target. style. webkitTransform! = Undefined) {target. style. webkitTransform = "rotate (" + angle + "deg)";} else {target. style. transform = "rotate (" + angle + "deg)" ;}} var tmp =-900; var m =-parseInt (Math. random () * 360); timer = setInterval (function () {if (I> 3000) {tmp = parseInt (tmp * 0.99); if (tmp> m) {tmp = m; clearInterval (timer); msg (m);} run (tmp);} else if (I> 1000) {I = I + 45; run (I);} else {I = pars EInt (I + 1) * 1.01); run (I) ;}, 50);} return {rotate: rotate }} (); function showMsg () {mRotate. rotate ("demo", function msg (m) {if (m>-90 & m <-30) {m $ ("msg "). innerHTML + = "22222222";} else if (m>-150 & m <-90) {m $ ("msg "). innerHTML + = "333333333";} else if (m>-210 & m <-150) {m $ ("msg "). innerHTML + = "444444";} else if (m>-270 & m <-210) {m $ ("msg "). innerHTML + = "555555" 5 ";} else if (m>-330 & m <-270) {m $ (" msg "). innerHTML + = "6666666";} else {m $ ("msg "). innerHTML + = "111111111";} m $ ('restart '). style. display = "block" ;}) ;}window. onload = function () {m $ ('test '). onclick = function () {m $ ('test '). style. display = "none"; showMsg ();} m $ ('restart '). onclick = function () {m $ ('restart '). style. display = "none"; if (isIE) {m $ ("demo "). style. top = "0px"; m $ (" Demo "). style. left =" 0px ";} else if (m $ (" demo "). style. Transform transform! = Undefined) {m $ ("demo"). style. Custom transform = 'rotate (0deg) ';} else if (m $ ("demo"). style. OTransform! = Undefined) {m $ ("demo"). style. OTransform = 'rotate (0deg) ';} else if (m $ ("demo"). style. webkitTransform! = Undefined) {m $ ("demo "). style. webkitTransform = 'rotate (0deg) ';} else {m $ ("demo "). style. transform = 'rotate (0deg) ';} m $ ('test '). style. display = "block"; I = 0 ;}}</script></body></html> </td> </tr></table>
Tip: you can modify some code before running