javascript圓盤抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子
效果預(yù)覽：
一、模擬抽獎(jiǎng)的實(shí)現(xiàn)過程
旋轉(zhuǎn)原理：當(dāng)支持CSS3屬性采用transform: rotate（角度deg）設(shè)置,當(dāng)角度為正數(shù)時(shí)順時(shí)針旋轉(zhuǎn)，當(dāng)為負(fù)數(shù)時(shí)逆時(shí)針旋轉(zhuǎn)。如果是IE8及其以下，采用采用絕對定位設(shè)置top和left，模擬角度旋轉(zhuǎn)。
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)";
}
}
模擬轉(zhuǎn)盤加速，勻速和減速。當(dāng)角度小于某個(gè)數(shù)值時(shí)，讓其處于加速此處采用1.01的系數(shù)作為加速度，當(dāng)大于某個(gè)數(shù)值時(shí)處于高速勻速狀態(tài)，當(dāng)角度大于設(shè)置的最大數(shù)值時(shí)，讓其減速采用系數(shù)為0.99。設(shè)置負(fù)數(shù)作為減速的值（即變量 tmp），隨即獲取負(fù)360中的值（即變量 m），當(dāng)大于這個(gè)值時(shí)，轉(zhuǎn)盤停止。
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);
啟動(dòng)抽獎(jiǎng)和重新設(shè)置抽獎(jiǎng)
<input id="test" type="button" value="抽獎(jiǎng)" />
<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>抽獎(jiǎng)</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="抽獎(jiǎng)" />
<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>
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
- js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲?qū)嵗?/a>
- javascript+HTML5 Canvas繪制轉(zhuǎn)盤抽獎(jiǎng)
- js HTML5 Canvas繪制轉(zhuǎn)盤抽獎(jiǎng)
- 利用Javascript實(shí)現(xiàn)簡單的轉(zhuǎn)盤抽獎(jiǎng)
- JS實(shí)現(xiàn)簡單的抽獎(jiǎng)轉(zhuǎn)盤效果示例
- Vue.js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)總結(jié)及實(shí)現(xiàn)思路
- js輪盤抽獎(jiǎng)實(shí)例分析
- 原生JS實(shí)現(xiàn)九宮格抽獎(jiǎng)效果
- JS模擬抽獎(jiǎng)序效果實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)簡易的單數(shù)字隨機(jī)抽獎(jiǎng)（0-9）
- js抽獎(jiǎng)轉(zhuǎn)盤實(shí)現(xiàn)方法分析
相關(guān)文章
javascript實(shí)現(xiàn)拖拽并替換網(wǎng)頁塊元素
實(shí)現(xiàn)類似于學(xué)生換座位的效果，將網(wǎng)頁內(nèi)的兩個(gè)元素通過拖拽的方式互換。2009-11-11
本文給大家介紹bootstrap按鈕相關(guān)知識(shí)，包括按鈕大小、按鈕狀態(tài)、按鈕標(biāo)簽相關(guān)樣式定義，對bootstrap按鈕相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
利用innerHTML代替createElement來動(dòng)態(tài)添加網(wǎng)頁內(nèi)容已成為一種普遍的認(rèn)識(shí)。但在商務(wù)應(yīng)用，大數(shù)據(jù)的datagrid屢見不鮮，就算是innerHTML也捉襟見肘，于是人們又開發(fā)了分時(shí)加載的技術(shù)了（利用setTimeout）。2009-12-12
我們知道TypeScript根據(jù)類型聲明進(jìn)行類型檢查，但有些情況可能沒有類型聲明，這個(gè)時(shí)候就需要我們自己寫一個(gè)，下面小編就來和大家聊聊如果寫一個(gè)Typescript的類型聲明文件呢2023-06-06
javascript中callee與caller的用法和應(yīng)用場景
javascript中callee和caller的用法和應(yīng)用場景分析，需要的朋友可以參考下。2010-12-12
JavaScript實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
prototype與jquery下Ajax實(shí)現(xiàn)的差別
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項(xiàng)目需要用到Ajax，由于主站所用的是Jquey，而某個(gè)欄目的開發(fā)用的是prototype，這樣一來就必須對JS代碼做調(diào)整了。2009-09-09
JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章介紹了JS中的幾種循環(huán)和跳出方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢）功能代碼
這篇文章主要介紹了touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢)功能,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02