2012年7月4日星期三

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="抽奖" />    <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;            }

参考示例：


TAG:
发帖者 时间：