HTML5-转盘抽奖功能

2017-01-14 08:48:31来源:CSDN作者:xionghui2007人点击

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

截图:



代码:

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


图片素材:



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台