简单JS旋转实现转盘抽奖效果

闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果:

可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域

比如,我选择了"区域2",结果就是这样

具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入)

HTML文件:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #RotationDiv {
                /*初始化界面,让指针朝上*/
                transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                width: 60px;
                height: 85px;
                /*边框是用来看旋转的地方的*/
                /*border: 1px solid black;*/
            }
        </style>
        <!--引入jq1.8-->
        <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
        <!--引入旋转的js-->
        <script src="js/rotation-index.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function rotationDiv(num) {
                RotationIndex("RotationDiv", 8, num, 4, 5)
            }
        </script>
    </head>

    <body>
        <div style="height: 85px;">
            <table align="center">
                <tr>
                    <td><input type="button" value="选择区域:1" οnclick="rotationDiv(1)" />
                        <input type="button" value="选择区域:2" οnclick="rotationDiv(2)" />
                        <input type="button" value="选择区域:3" οnclick="rotationDiv(3)" />
                        <input type="button" value="选择区域:4" οnclick="rotationDiv(4)" />
                        <input type="button" value="选择区域:5" οnclick="rotationDiv(5)" />
                        <input type="button" value="选择区域:6" οnclick="rotationDiv(6)" />
                        <input type="button" value="选择区域:7" οnclick="rotationDiv(7)" />
                        <input type="button" value="选择区域:8" οnclick="rotationDiv(8)" /></td>
                </tr>
            </table>
        </div>
        <table align="center" style="background-image: url(img/revolveBgImage.png); width: 500px;height: 500px;">
            <tr>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td style="width: 220px;">
                </td>
                <td>
                    <div id="RotationDiv"><img src="img/timg.png" width="100%" /></div>
                </td>
                <td style="width: 220px;"></td>
            </tr>
            <tr>
                <td colspan="3"></td>
            </tr>
        </table>
    </body>

</html>

自己写的旋转的JS文件:

/**
 * @param {Object} indexID        想要旋转的控件的id
 * @param {Object} areaNum        区域的块数
 * @param {Object} wantToStop    想要停止的位置(块号)
 * @param {Object} defaultTime    刚开始匀速旋转的时间
 * @param {Object} chageTime    最后减速旋转的时间
 */
function RotationIndex(indexID, areaNum, wantToStop, defaultTime, chageTime) {

    var stopAreaNum = 0; //停在区域的名字数
    var areaArr = new Array(areaNum);
    var angle = 1; //每次旋转角度
//    var randomTime = Math.random() * 1500; //随机时间
    var nowTime = 0; //当前时间,随机起点,让停止来的更加真实
    var disTime = 15; //时间差值,每15毫秒改变一次,基本上类似于60Hz刷新频率
    var disangle = 13; //角度差值
    var angle360 = 0; //用于记录角度数,360°范围的

    var UP = (1 - ((12 / chageTime) * defaultTime)); //定义一个函数uniformizing parameter
    var IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定义一个反比例函数的参数Inverse proportional function parameters

    var myIntervalInRotationIndex = window.setInterval(function() {
        nowTime += disTime;
        //当时间小于默认时间时候
        if((nowTime / 1000) <= defaultTime) {
            //匀速旋转
        } else if((nowTime / 1000) > defaultTime && (nowTime / 1000) < (defaultTime + chageTime)) {
            //当时间大于默认时间,开始减速旋转
            disangle = UP + (IPFP / (nowTime / 1000));
            /**
             * 函数式为:
             * UP+IPFP/t=h
             * 其中t为时间,h为角度
             * 
             */
        } else {
            angle360 = angle % 360;
            stopAreaNum = angle360 / (360 / areaNum);
            if(stopAreaNum >= (wantToStop - 1.5)) {
                disangle = 0.3;
            } else if(stopAreaNum >= (wantToStop - 1)) {
                disangle = 0.5;
            } else {
                disangle = 0.8;
            }
            if(stopAreaNum >= (wantToStop - 0.8) && stopAreaNum <= wantToStop) {
                window.clearInterval(myIntervalInRotationIndex);
            }

        }
        angle360 = angle % 360;
        angle += disangle;
        $("#" + indexID).attr("style", "transform:rotate(" + angle + "deg);-ms-transform:rotate(" + angle + "deg);-moz-transform:rotate(" + angle + "deg);-webkit-transform:rotate(" + angle + "deg);-o-transform:rotate(" + angle + "deg);")
    }, disTime)

}

飞翔的熊blabla

发布了134 篇原创文章 · 获赞 401 · 访问量 162万+

他的留言板关注

简单JS旋转实现转盘抽奖效果

猜你喜欢