javascript圆盘抽奖程序实现原理和完整代码例子
41 浏览量
2020-10-25
20:57:32
上传
评论
收藏 43KB PDF 举报
javascript圆盘抽奖程序实现原理和完整代码例子圆盘抽奖程序实现原理和完整代码例子
主要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下
效果预览：
一、模拟抽奖的实现过程一、模拟抽奖的实现过程
旋转原理：当支持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="抽奖" />
评论0
最新资源