JS旋转实现转盘抽奖效果

第JS旋转实现转盘抽奖效果本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码，供大家参考，具体内容如下

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

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

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

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

HTML文件:

!DOCTYPEhtml

html

head

metacharset="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:1pxsolidblack;*/

}

/style

!--引入jq1.8--

scriptsrc="js/jquery-1.8.3.js"type="text/javascript"charset="utf-8"/script

!--引入旋转的js--

scriptsrc="js/rotation-index.js"type="text/javascript"charset="utf-8"/script

scripttype="text/javascript"

functionrotationDiv(num){

RotationIndex("RotationDiv",8,num,4,5)

}

/script

/head

body

div

tablealign="center"

tr

tdinputtype="button"value="选择区域:1"οnclick="rotationDiv(1)"/

inputtype="button"value="选择区域:2"οnclick="rotationDiv(2)"/

inputtype="button"value="选择区域:3"οnclick="rotationDiv(3)"/

inputtype="button"value="选择区域:4"οnclick="rotationDiv(4)"/

inputtype="button"value="选择区域:5"οnclick="rotationDiv(5)"/

inputtype="button"value="选择区域:6"οnclick="rotationDiv(6)"/

inputtype="button"value="选择区域:7"οnclick="rotationDiv(7)"/

inputtype="button"value="选择区域:8"οnclick="rotationDiv(8)"//td

/tr

/table

/div

tablealign="center"

tr

tdcolspan="3"/td

/tr

tr

td

/td

td

divid="RotationDiv"imgsrc="img/timg.png"width="100%"//div

/td

td/td

/tr

tr

tdcolspan="3"/td

/tr

/table

/body

/html

自己写的旋转的JS文件:

/**

*@param{Object}indexID

想要旋转的控件的id

*@param{Object}areaNum

区域的块数

*@param{Object}wantToStop

想要停止的位置(块号)

*@param{Object}defaultTime

刚开始匀速旋转的时间

*@param{Object}chageTime

最后减速旋转的时间

functionRotationIndex(indexID,areaNum,wantToStop,defaultTime,chageTime){

varstopAreaNum=0;//停在区域的名字数

varareaArr=newArray(areaNum);

varangle=1;//每次旋转角度

//

varrandomTime=Math.random()*1500;//随机时间

varnowTime=0;//当前时间,随机起点,让停止来的更加真实

vardisTime=15;//时间差值,每15毫秒改变一次,基本上类似于60Hz刷新频率

vardisangle=13;//角度差值

varangle360=0;//用于记录角度数,360°范围的

varUP=(1-((12/chageTime)*defaultTime));//定义一个函数uniformizingparameter

varIPFP=12*defaultTime+(12/chageTime)*defaultTime*defaultTime;//定义一个反比例函数的参数Inverseproportionalfunctionparameters

varmyIntervalInRotationIndex=window.setInterval(function(){

nowTime+=disTime;

//当时间小于默认时间时候

if((nowTime/1000)=defaultTime){

//匀速旋转

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

}elseif(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("+ang