JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)效果
更新時(shí)間：2022年02月23日 15:41:36 作者：飛翔的熊blabla
這篇文章主要為大家詳細(xì)介紹了JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)的HTML&JS的效果:
可以在設(shè)置的時(shí)候,選擇幾個(gè)區(qū)域,并且可以填寫(xiě)指針將要停止的區(qū)域
比如,我選擇了"區(qū)域2",結(jié)果就是這樣
具體可以見(jiàn)下面的源碼:(注意,這里JQ文檔沒(méi)有貼出來(lái),需要自行引入)
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;
? ? ? ? ? ? ? ? /*邊框是用來(lái)看旋轉(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>自己寫(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í)間
?*/
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; //隨機(jī)時(shí)間
? ? var nowTime = 0; //當(dāng)前時(shí)間,隨機(jī)起點(diǎn),讓停止來(lái)的更加真實(shí)
? ? var disTime = 15; //時(shí)間差值,每15毫秒改變一次,基本上類(lèi)似于60Hz刷新頻率
? ? var disangle = 13; //角度差值
? ? var angle360 = 0; //用于記錄角度數(shù),360°范圍的
? ? var UP = (1 - ((12 / chageTime) * defaultTime)); //定義一個(gè)函數(shù)uniformizing parameter
? ? var IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定義一個(gè)反比例函數(shù)的參數(shù)Inverse proportional function parameters
? ? var myIntervalInRotationIndex = window.setInterval(function() {
? ? ? ? nowTime += disTime;
? ? ? ? //當(dāng)時(shí)間小于默認(rèn)時(shí)間時(shí)候
? ? ? ? if((nowTime / 1000) <= defaultTime) {
? ? ? ? ? ? //勻速旋轉(zhuǎn)
? ? ? ? } else if((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;
? ? ? ? ? ? } 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)
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
面試的時(shí)候經(jīng)常會(huì)問(wèn)到JS 中 判斷數(shù)據(jù)類(lèi)型的方法，一般常用的 就是typeof了 ，其他的也想不起來(lái)，今天特意在網(wǎng)上查了一下來(lái)總結(jié),這篇文章主要介紹了利用JS判斷數(shù)據(jù)類(lèi)型的四種方法,需要的朋友可以參考下2021-08-08
網(wǎng)站被黑的假象--ARP欺騙之頁(yè)面中加入一段js
網(wǎng)站被黑的假象--ARP欺騙之頁(yè)面中加入一段js...2007-05-05
這篇文章主要為大家介紹了js前端上傳文件縮略圖技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JS中數(shù)組常用的循環(huán)遍歷你會(huì)幾種
JS 遍歷數(shù)組（循環(huán)數(shù)組）的方式有多種，但你都知道嗎？下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)組常用循環(huán)遍歷的相關(guān)資料，需要的朋友可以參考下2021-06-06
js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
需要改變多個(gè)元素的位置，可以通過(guò)元素拖動(dòng)來(lái)實(shí)現(xiàn)，下面以圖片拖動(dòng)為例，用jQuery來(lái)實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)到搜索的下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架下下拉框select搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript面試出現(xiàn)頻繁的一些易錯(cuò)點(diǎn)整理
通過(guò)幾個(gè)常見(jiàn)面試開(kāi)始,討論針對(duì)一個(gè)題目的分析思路，就有了下面這篇文章，本文主要給大家整理總結(jié)介紹了關(guān)于JavaScript面試中會(huì)頻繁出現(xiàn)的一些易錯(cuò)點(diǎn)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2018-03-03
本文主要介紹了jsonp跨域請(qǐng)求的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
對(duì)于不同類(lèi)型的需要重復(fù)計(jì)算的問(wèn)題，循環(huán)和遞歸兩種方法各有所長(zhǎng)，能給出更直觀簡(jiǎn)單的方案，下面為大家詳細(xì)的介紹下JavaScript的遞歸與循環(huán)，感興趣的朋友可以了解下2013-08-08