js輪盤抽獎實例分析

更新時間：2021年09月18日 14:42:24 投稿：lijiao

這篇文章主要為大家詳細介紹了js輪盤抽獎實例，分析js輪盤抽獎實現(xiàn)原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

現(xiàn)在學習到了過渡效果了，已經(jīng)開始有做動畫效果的意識了，會實現(xiàn)一些比較炫的小玩意，一個網(wǎng)頁加入過渡動畫效果，會讓人看起來很有美觀，不僵硬，有看頭，動畫是一個網(wǎng)頁美觀的主要體現(xiàn)之一，下面做個使用個過渡效果實現(xiàn)的抽獎例子。

先來效果圖：

這個的實現(xiàn)需要使用到一些js代碼。

所需圖片：

這張圖是pointer.png的位置的。

turntable-bg.jpg這張是背景圖，在背景位置。

這張是turntable.png位置的。

需要這三張圖片，如果要實現(xiàn)一下，直接另存這三圖片引入進去即可。如果不會請修改成對應的圖片名字，放到同一個文件下。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>抽獎</title>
 <!-- 這里是css部分 -->
 <style>
 #bg{
 width: 650px;
 height: 600px;
 margin: 0 auto;
 background: url(turntable-bg.jpg) no-repeat;
 position: relative;
 }
 img[src^="pointer"]{
 position: absolute;
 z-index: 10;
 top: 155px;
 left: 247px;
 }
 img[src^="turntable"]{
 position: absolute;
 z-index: 5;
 top: 60px;
 left: 116px;
 transition: all 4s;
 }
 
 </style>
</head>
<body>
<!-- 這里是HTML結(jié)構(gòu)部分 -->
 <div id="bg">
 <img src="pointer.png" alt="pointer">
 <img src="turntable.png" alt="turntable">
 </div>
 <!-- 這里是js部分 -->
 <script>
 var oPointer=document.getElementsByTagName("img")[0];
 var oTurntable=document.getElementsByTagName("img")[1];
 var cat=51.4;
 var num=0;
 var offOn=true;
 document.title="";
 
 oPointer.onclick=function(){
 if(offOn){
 oTurntable.style.transform="rotate(0deg)";
 offOn=!offOn;
 ratating();
 }
 }

 function ratating(){
 var timer=null;
 var rdm=0;
 clearInterval(timer);
 timer=setInterval(function(){
 if(Math.floor(rdm/360)<3){
 rdm=Math.floor(Math.random()*3600); 
 }else{
 oTurntable.style.transform="rotate("+rdm+"deg)";
 clearInterval(timer);
 setTimeout(function(){
 offOn=!offOn;
 num=rdm%360;
 if(num<=cat*1){
 alert("4999元");
 }else if(num<=cat*2){
 alert("條50元");
 }else if(num<=cat*3){
 alert("10元");
 }else if(num<=cat*4){
 alert("5元");
 }else if(num<=cat*5){
 alert("免息服務");
 }else if(num<=cat*6){
 alert("提交白金");
 }else if(num<=cat*7){
 alert("未中獎");
 }
 },4000);
 } 
 },30); 
 }
 </script>
</body>
</html>

css和HTML代碼不多，主要是為了實現(xiàn)過渡設置，還有為了實現(xiàn)層疊而使用position定位，讓元素脫離文檔流，js代碼在于獲取元素和事件的點擊，點擊指針會旋轉(zhuǎn)，所以要給指針加個點擊事件，然后是判斷旋轉(zhuǎn)是否停止，如果沒有就點擊也不能調(diào)用函數(shù)ratating()，這個函數(shù)執(zhí)行轉(zhuǎn)盤的旋轉(zhuǎn)和判斷指針停在什么位置，然后彈出相應的內(nèi)容，而函數(shù)里實現(xiàn)旋轉(zhuǎn)的過程，是獲取轉(zhuǎn)盤的元素，然后使用js控制css的屬性-transform：rotate()，我們不是使用過這個屬性在css里直接使它實現(xiàn)旋轉(zhuǎn)的效果嗎？就是和偽類選擇器:hover及過渡屬性一起使用去實現(xiàn)的，那么因為css實現(xiàn)不了數(shù)字的運算和鼠標點擊，所以讓js去實現(xiàn)且控制css屬性，實現(xiàn)到點擊旋轉(zhuǎn)這個功能，然而定時器的使用暫時不說，思路就是使用js實現(xiàn)數(shù)字的運算和鼠標的點擊及css屬性的控制達到旋轉(zhuǎn)的效果。

Math.random()是隨機數(shù)的生成，Math.floor()向下取整。

想要學習更多關于抽獎功能的實現(xiàn)，請參考此專題：抽獎功能

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

您可能感興趣的文章: