JS旋转实现转盘抽奖效果

2024-04-02 19:04:59 490人浏览泡泡鱼

摘要

本文实例为大家分享了js旋转实现转盘抽奖效果的具体代码，供大家参考，具体内容如下闲来没事,做了一个模拟转盘抽奖的html&JS的效果: 可以在设置的时候,选择几个区域,并

本文实例为大家分享了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;
                
                
            }
        </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文件:


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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: JS旋转实现转盘抽奖效果

本文链接: https://lsjlt.com/news/140246.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341