javascript圆盘抽奖程序实现原理和完整代码例子_Javascript教程-查字典教程网
javascript圆盘抽奖程序实现原理和完整代码例子
javascript圆盘抽奖程序实现原理和完整代码例子
发布时间:2017-01-14 来源:查字典编辑
摘要:效果预览:一、模拟抽奖的实现过程旋转原理:当支持CSS3属性采用transform:rotate(角度deg)设置,当角度为正数时顺时针旋转...

效果预览:

一、模拟抽奖的实现过程

旋转原理:当支持CSS3属性采用transform: rotate(角度deg)设置,当角度为正数时顺时针旋转,当为负数时逆时针旋转。如果是IE8及其以下,采用采用绝对定位设置top和left,模拟角度旋转。

run方法,参数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)";

}

}

模拟转盘加速,匀速和减速。当角度小于某个数值时,让其处于加速此处采用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(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" 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:

复制代码 代码如下:<!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:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}

</style>

</head>

<body>

<div id="container">

<div id="demo">

<img src="http://files.jb51.net/file_images/article/201406/20146394819279.png" width="400" height="400" />

</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 = 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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类