js輪盤抽獎實例分析
編輯：關於JavaScript
現在學習到了過渡效果了，已經開始有做動畫效果的意識了，會實現一些比較炫的小玩意，一個網頁加入過渡動畫效果，會讓人看起來很有美觀，不僵硬，有看頭，動畫是一個網頁美觀的主要體現之一，下面做個使用個過渡效果實現的抽獎例子。
先來效果圖：
這個的實現需要使用到一些js代碼。
所需圖片：
這張圖是pointer.png的位置的。
turntable-bg.jpg這張是背景圖，在背景位置。
這張是turntable.png位置的。
需要這三張圖片，如果要實現一下，直接另存這三圖片引入進去即可。如果不會請修改成對應的圖片名字，放到同一個文件下。
代碼：
<!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結構部分 -->
<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代碼不多，主要是為了實現過渡設置，還有為了實現層疊而使用position定位，讓元素脫離文檔流，js代碼在於獲取元素和事件的點擊，點擊指針會旋轉，所以要給指針加個點擊事件，然後是判斷旋轉是否停止，如果沒有就點擊也不能調用函數ratating()，這個函數執行轉盤的旋轉和判斷指針停在什麼位置，然後彈出相應的內容，而函數裡實現旋轉的過程，是獲取轉盤的元素，然後使用js控制css的屬性-transform：rotate()，我們不是使用過這個屬性在css裡直接使它實現旋轉的效果嗎？就是和偽類選擇器:hover及過渡屬性一起使用去實現的，那麼因為css實現不了數字的運算和鼠標點擊，所以讓js去實現且控制css屬性，實現到點擊旋轉這個功能，然而定時器的使用暫時不說，思路就是使用js實現數字的運算和鼠標的點擊及css屬性的控制達到旋轉的效果。
Math.random()是隨機數的生成，Math.floor()向下取整。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦