効果プレビュー：
1.シミュレートされた宝くじの実装プロセス
回転原理：CSS3属性をサポートする場合、変換：回転（角度deg）設定が設定され、角度が正の場合は時計回りに回転し、負の場合は反時計回りに回転します。 IE8以下の場合は、絶対位置設定を使用して、上部と左を使用して角度回転をシミュレートします。
実行方法、パラメーター角は角度を指します
コードコピーは次のとおりです。
関数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 = cosdeg; 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.moztransform = "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）";
} それ以外 {
Target.style.Transform = "Rotate（" + angle + "deg）";
}
}
ターンテーブルの加速、一定の速度、減速をシミュレートします。角度が特定の値よりも小さい場合、1.01の係数が加速として使用されます。特定の値よりも大きい場合、減速係数は0.99です。負の数を減速の値（つまり、変数TMP）として設定し、負の360（つまり可変m）で値を取得し、この値よりも大きい場合、ターンテーブルは停止します。
コードコピーは次のとおりです。
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（タイマー）;
msg（m）;
}
run（tmp）;
}
else if（i> 1000）{
i = i + 45;
実行（i）;
}
それ以外 {
i = parseint（（i + 1） * 1.01）;
実行（i）;
}
}、50）;
宝くじを始めて、宝くじをリセットします
コードコピーは次のとおりです。
<入力ID = "TEST" type = "ボタン" value = "Luck Draw" />
<入力id = "restart" style = "display：none;" type = "button" value = "再び描画" />
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.moztransform！== undefined）{
m $（ "demo"）。style.moztransform = '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）';
} それ以外 {
m $（ "demo"）。style.transform = 'rotate（0deg）';
}
m $（ 'test'）。style.display = "block";
i = 0;
}
2。完全なコードデモ：
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<title>ラッフル宝くじ</title>
<style type = "text/css">
#container {width：400px; height：400px; position：relative; margin：0 auto;}
#demo {position：absolute; filter：progid：dmimagetransform.microsoft.matrix（sizingmethod = "auto Expand"）;}
</style>
</head>
<body style = "height：1000px;">
<div id = "container">
<div id = "demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<入力ID = "TEST" type = "ボタン" value = "Luck Draw" />
<入力id = "restart" style = "display：none;" 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(uua）&&！window.opera;
var i = 1、sindeg = 0、cosdeg = 0、タイマー= null;
var mrotate = function（）{
var rotate = function（target、msg）{
ターゲット= m $（ターゲット）;
var organw =ターゲット、clientwidth、orginh = target.clientheight;
ClearInterval（タイマー）;
関数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 = cosdeg; 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.moztransform = "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）";
} それ以外 {
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（タイマー）;
msg（m）;
}
run（tmp）;
}
else if（i> 1000）{
i = i + 45;
実行（i）;
}
それ以外 {
i = parseint（（i + 1） * 1.01）;
実行（i）;
}
}、50）;
}
return {回転：回転}
}（）;
関数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 += "5555555";
}
else if（m> -330 && m <-270）{
m $（ "msg"）。innerhtml += "6666666";
} それ以外 {
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.moztransform！== undefined）{
m $（ "demo"）。style.moztransform = '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）';
} それ以外 {
m $（ "demo"）。style.transform = 'rotate（0deg）';
}
m $（ 'test'）。style.display = "block";
i = 0;
}
}
</script>
</body>
</html>