JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)效果

第JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)效果本文實(shí)例為大家分享了JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)效果的具體代碼，供大家參考，具體內(nèi)容如下

閑來(lái)沒(méi)事,做了一個(gè)模擬轉(zhuǎn)盤(pán)抽獎(jiǎng)的HTMLJS的效果:

可以在設(shè)置的時(shí)候,選擇幾個(gè)區(qū)域,并且可以填寫(xiě)指針將要停止的區(qū)域

比如,我選擇了區(qū)域2,結(jié)果就是這樣

具體可以見(jiàn)下面的源碼:(注意,這里JQ文檔沒(méi)有貼出來(lái),需要自行引入)

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;

/*邊框是用來(lái)看旋轉(zhuǎn)的地方的*/

/*border:1pxsolidblack;*/

}

/style

!--引入jq1.8--

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

!--引入旋轉(zhuǎn)的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="選擇區(qū)域:1"οnclick="rotationDiv(1)"/

inputtype="button"value="選擇區(qū)域:2"οnclick="rotationDiv(2)"/

inputtype="button"value="選擇區(qū)域:3"οnclick="rotationDiv(3)"/

inputtype="button"value="選擇區(qū)域:4"οnclick="rotationDiv(4)"/

inputtype="button"value="選擇區(qū)域:5"οnclick="rotationDiv(5)"/

inputtype="button"value="選擇區(qū)域:6"οnclick="rotationDiv(6)"/

inputtype="button"value="選擇區(qū)域:7"οnclick="rotationDiv(7)"/

inputtype="button"value="選擇區(qū)域:8"οnclick="rotationDiv(8)"http://td

/tr

/table

/div

tablealign="center"

tr

tdcolspan="3"/td

/tr

tr

td

/td

td

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

/td

td/td

/tr

tr

tdcolspan="3"/td

/tr

/table

/body

/html

自己寫(xiě)的旋轉(zhuǎn)的JS文件:

/**

*@param{Object}indexID

想要旋轉(zhuǎn)的控件的id

*@param{Object}areaNum

區(qū)域的塊數(shù)

*@param{Object}wantToStop

想要停止的位置(塊號(hào))

*@param{Object}defaultTime

剛開(kāi)始勻速旋轉(zhuǎn)的時(shí)間

*@param{Object}chageTime

最后減速旋轉(zhuǎn)的時(shí)間

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

varstopAreaNum=0;//停在區(qū)域的名字?jǐn)?shù)

varareaArr=newArray(areaNum);

varangle=1;//每次旋轉(zhuǎn)角度

//

varrandomTime=Math.random()*1500;//隨機(jī)時(shí)間

varnowTime=0;//當(dāng)前時(shí)間,隨機(jī)起點(diǎn),讓停止來(lái)的更加真實(shí)

vardisTime=15;//時(shí)間差值,每15毫秒改變一次,基本上類(lèi)似于60Hz刷新頻率

vardisangle=13;//角度差值

varangle360=0;//用于記錄角度數(shù),360°范圍的

varUP=(1-((12/chageTime)*defaultTime));//定義一個(gè)函數(shù)uniformizingparameter

varIPFP=12*defaultTime+(12/chageTime)*defaultTime*defaultTime;//定義一個(gè)反比例函數(shù)的參數(shù)Inverseproportionalfunctionparameters

varmyIntervalInRotationIndex=window.setInterval(function(){

nowTime+=disTime;

//當(dāng)時(shí)間小于默認(rèn)時(shí)間時(shí)候

if((nowTime/1000)=defaultTime){

//勻速旋轉(zhuǎn)

}elseif((nowTime/1000)defaultTime(nowTime/1000)(defaultTime+chageTime)){

//當(dāng)時(shí)間大于默認(rèn)時(shí)間,開(kāi)始減速旋轉(zhuǎn)

disangle=UP+(IPFP/(nowTime/1000));

/**

*函數(shù)式為:

*UP+IPFP/t=h

*其中t為時(shí)間,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