javascript圓盤抽獎程序實現(xiàn)原理和完整代碼例子
效果預覽：
一、模擬抽獎的實現(xiàn)過程
旋轉原理：當支持CSS3屬性采用transform: rotate（角度deg）設置,當角度為正數(shù)時順時針旋轉，當為負數(shù)時逆時針旋轉。如果是IE8及其以下，采用采用絕對定位設置top和left，模擬角度旋轉。
run方法，參數(shù)angle指角度
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 = 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)";
} else {
target.style.transform = "rotate(" + angle + "deg)";
}
}
模擬轉盤加速，勻速和減速。當角度小于某個數(shù)值時，讓其處于加速此處采用1.01的系數(shù)作為加速度，當大于某個數(shù)值時處于高速勻速狀態(tài)，當角度大于設置的最大數(shù)值時，讓其減速采用系數(shù)為0.99。設置負數(shù)作為減速的值（即變量 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(timer);
msg(m);
}
run(tmp);
}
else if (i > 1000) {
i = i + 45;
run(i);
}
else {
i = parseInt((i + 1) * 1.01);
run(i);
}
}, 50);
啟動抽獎和重新設置抽獎
<input id="test" type="button" value="抽獎" />
<input 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)';
} else {
m$("demo").style.transform = 'rotate(0deg)';
}
m$('test').style.display = "block";
i = 0;
}
二、完整代碼demo:
<html>
<head>
<title>抽獎</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 style="height: 1000px;">
<div id="container">
<div id="demo">
<img alt="" src="http://img.jbzj.com/file_images/article/201406/20146394819279.png?20145394926" width="400" height="400" />
</div>
</div>
<input id="test" type="button" value="抽獎" />
<input 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(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 = 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)";
} 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 = parseInt((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 += "5555555";
}
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.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)';
} else {
m$("demo").style.transform = 'rotate(0deg)';
}
m$('test').style.display = "block";
i = 0;
}
}
</script>
</body>
</html>
相關文章
這篇文章主要介紹了el-select加上搜索查詢時,限制開頭空格輸入的解決方案,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了JS實現(xiàn)圖片放大縮小的方法,結合實例形式分析了javascript動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了js常用的方法示例梳理總結及功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序解析富文本過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值2019-07-07
柱狀圖主要用于表示離散數(shù)據(jù)的頻數(shù),也是一種基礎可視化圖,這篇文章主要給大家介紹了關于Echarts Bar橫向柱狀圖的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
讓firefox支持IE的一些方法的javascript擴展函數(shù)代碼
因為一些代碼，只能在IE下實現(xiàn)，如果用firefox實現(xiàn)就必須用一些擴展函數(shù)。2010-01-01
javascript數(shù)據(jù)結構之多叉樹經(jīng)典操作示例【創(chuàng)建、添加、遍歷、移除等】
這篇文章主要介紹了javascript數(shù)據(jù)結構之多叉樹經(jīng)典操作,簡單描述了多叉樹的概念,并結合實例形式分析了javascript多叉樹的創(chuàng)建、添加、遍歷、移除等常見操作方法,需要的朋友可以參考下2018-08-08
下面小編就為大家?guī)硪黄狫S獲取字符對應的ASCII碼實例。小編覺得挺不錯的，現(xiàn)在就想給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了js控制多圖左右滾動切換效果，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04