今天學習製作了轉盤抽獎功能的頁面
截圖：
代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>轉盤抽獎功能</title>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#content img").click(function(e) {
var num = Math.floor(Math.random() * 3600); //求得隨機的旋轉度數
$("#zhuan").css('transform', 'rotate(' + num + 'deg)');
num %= 360; //num=num%360;摩以360後的餘數，
//得到一個1至360的數值，進行轉盤分成幾分的判斷
//設定旋轉變換3秒後執行下面的提示
setTimeout(function() {
if(num <= 51.4 * 1) {
alert('100G永久免費空間');
} else if(num <= 51.4 * 2) {
alert('36Mb空間');
} else if(num <= 51.4 * 3) {
alert('100經驗值');
} else if(num <= 51.4 * 4) {
alert('360Mb空間');
} else if(num <= 51.4 * 5) {
alert('36經驗值');
} else if(num <= 51.4 * 6) {
alert('100Mb空間');
} else if(num <= 51.4 * 7) {
alert('360經驗值');
}
}, 3000);
});
});
</script>
<style type="text/css">
/*轉盤背景*/
#content {
width: 450px;
height: 450px;
background: url(images/disc-bg.gif) no-repeat;
margin: auto;
overflow: hidden;
position: relative;
}
/*轉盤*/
#zhuan {
width: 352px;
height: 352px;
background: url(images/disc-rotate.gif) no-repeat;
margin: 48px 0px 0 48px;
transition: all 3s ease;
/*3秒變換一次*/
}
/*轉盤指針*/
#content img {
position: absolute;
top: 90px;
left: 153px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content">
<div id="zhuan"></div>
<img src="images/arrow1.png"> </div>
</body>
</html>
圖片素材：
