JS旋轉(zhuǎn)實現(xiàn)轉(zhuǎn)盤抽獎效果

更新時間：2022年02月23日 15:41:36 作者：飛翔的熊blabla

這篇文章主要為大家詳細(xì)介紹了JS旋轉(zhuǎn)實現(xiàn)轉(zhuǎn)盤抽獎效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

閑來沒事,做了一個模擬轉(zhuǎn)盤抽獎的HTML&JS的效果:

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

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

具體可以見下面的源碼:(注意,這里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;
? ? ? ? ? ? ? ? /*邊框是用來看旋轉(zhuǎn)的地方的*/
? ? ? ? ? ? ? ? /*border: 1px solid black;*/
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <!--引入jq1.8-->
? ? ? ? <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
? ? ? ? <!--引入旋轉(zhuǎn)的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="選擇區(qū)域:1" οnclick="rotationDiv(1)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域:2" οnclick="rotationDiv(2)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域:3" οnclick="rotationDiv(3)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域:4" οnclick="rotationDiv(4)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域:5" οnclick="rotationDiv(5)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域:6" οnclick="rotationDiv(6)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域:7" οnclick="rotationDiv(7)" />
? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="選擇區(qū)域: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>

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

/**
?* @param {Object} indexID ? ? ? ?想要旋轉(zhuǎn)的控件的id
?* @param {Object} areaNum ? ? ? ?區(qū)域的塊數(shù)
?* @param {Object} wantToStop ? ?想要停止的位置(塊號)
?* @param {Object} defaultTime ? ?剛開始勻速旋轉(zhuǎn)的時間
?* @param {Object} chageTime ? ?最后減速旋轉(zhuǎn)的時間
?*/
function RotationIndex(indexID, areaNum, wantToStop, defaultTime, chageTime) {

? ? var stopAreaNum = 0; //停在區(qū)域的名字?jǐn)?shù)
? ? var areaArr = new Array(areaNum);
? ? var angle = 1; //每次旋轉(zhuǎn)角度
// ? ?var randomTime = Math.random() * 1500; //隨機時間
? ? var nowTime = 0; //當(dāng)前時間,隨機起點,讓停止來的更加真實
? ? var disTime = 15; //時間差值,每15毫秒改變一次,基本上類似于60Hz刷新頻率
? ? var disangle = 13; //角度差值
? ? var angle360 = 0; //用于記錄角度數(shù),360°范圍的

? ? var UP = (1 - ((12 / chageTime) * defaultTime)); //定義一個函數(shù)uniformizing parameter
? ? var IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定義一個反比例函數(shù)的參數(shù)Inverse proportional function parameters

? ? var myIntervalInRotationIndex = window.setInterval(function() {
? ? ? ? nowTime += disTime;
? ? ? ? //當(dāng)時間小于默認(rèn)時間時候
? ? ? ? if((nowTime / 1000) <= defaultTime) {
? ? ? ? ? ? //勻速旋轉(zhuǎn)
? ? ? ? } else if((nowTime / 1000) > defaultTime && (nowTime / 1000) < (defaultTime + chageTime)) {
? ? ? ? ? ? //當(dāng)時間大于默認(rèn)時間,開始減速旋轉(zhuǎn)
? ? ? ? ? ? disangle = UP + (IPFP / (nowTime / 1000));
? ? ? ? ? ? /**
? ? ? ? ? ? ?* 函數(shù)式為:
? ? ? ? ? ? ?* 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)

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: