HTML5-转盘抽奖功能

来源：互联网发布：推广淘宝优惠券挣钱编辑：程序博客网时间：2024/06/04 17:57

今天学习制作了转盘抽奖功能的页面

截图：

代码：

<!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>

图片素材：

0 0