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;
            }

二、完整代码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 style="height: 1000px;">
    <div id="container">
        <div id="demo">
            <img alt="" src="http://zsrimg.ikafan.com/file_images/article/201406/20146394819279.png?20145394926" 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>

赞 (0)

相关推荐

  • js实现大转盘抽奖游戏实例

    本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • js实现简单随机抽奖的方法

    本文实例讲述了js实现简单随机抽奖的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/java

  • js抽奖实现随机抽奖代码效果

    随机抽取,简单代码. 复制代码 代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • JavaScript 抽奖效果实现代码 数字跳动版

    JavaScript实现的抽奖效果 数字跳动版 .a1 {}{ position: relative; font-family: Verdana; font-size: 200px; color: #888888; } function Lottery() { var Nos = Math.round(Math.random() * (4999 - 1) + 1); var result = document.getElementById("layer1"); if (result !

  • javascript 随机抽奖程序代码

    随机抽奖程序 请单击开始抽奖 开始抽奖(S) 停止(O) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 慕课网题目之js实现抽奖系统功能

    本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下 要求实现功能: 1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖: 2.敲击回车键,开始抽奖,再次敲击回车键,停止抽奖: 3.开始抽奖后,左侧按钮变色: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖</title

  • js轮盘抽奖实例分析

    js轮盘抽奖实例分析

    现在学习到了过渡效果了,已经开始有做动画效果的意识了,会实现一些比较炫的小玩意,一个网页加入过渡动画效果,会让人看起来很有美观,不僵硬,有看头,动画是一个网页美观的主要体现之一,下面做个使用个过渡效果实现的抽奖例子. 先来效果图: 这个的实现需要使用到一些js代码. 所需图片: 这张图是pointer.png的位置的. turntable-bg.jpg这张是背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现一下,直接另存这三图片引入进去即可.如果不会请修改

  • JS模拟抽奖序效果实现代码

    JS模拟抽奖效果 .a1{ position:relative; font-family:Verdana; font-size:20px; color:#888888; } function lotto(){ if (!document.all&&!document.layers) return for (j=1; j  "+Nos+""); document.layers.layer1.document.close(); } T=setTimeout('lo

  • js简单抽奖代码

    核心:js的Math对象和Array对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>random</title> <style> #awardListDom{width: 100%;} </style> </head> <body> <label

随机推荐