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

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

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

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

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

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)

}

转盘背景用的是500px*500px的,指针的地方需要注意的是,div框的大小应当是需要旋转的中心部位,而不能用div把指针全部包入.