javascript 抽獎

本文轉載自查看原文 2012-07-04 01:58 4168 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" 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;
            }

參考示例：

<!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 style="height: 1000px;"> <div id="container"> <div id="demo"> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_a.png" 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript實現抽獎程序 javascript實現控制抽獎概率 HTML+JavaScript實現一個簡單抽獎功能抽獎動畫 - 滾動抽獎抽獎算法幸運大抽獎抽獎轉盤抽獎算法抽獎動畫 - 開寶箱抽獎年會抽獎抽獎系統抽獎軟件 C# Winform