幸运转盘

#不许人间见白头#

于 2020-07-28 22:14:09 发布

阅读量309

点赞数

本文链接：https://blog.csdn.net/weixin_45936406/article/details/107646702

版权

幸运转盘

<html>
	<head>
		<title>幸运转盘</title>
			<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
			<script type="text/javascript" src="js/awardRotate.js"></script>
			<style type="text/css">
				#turntable-bg{
					width:650px;
					height:600px;
					background:url("images/turntable-bg.jpg");
					margin:30px auto;
					position:relative;
				}
				#turntable{
					width:450px;
					height:450px;
					background:url("images/turntable.png");
					margin: 30px auto;
					position:absolute;
					top: 30px;
					left: 116px;
					
					
				}
				#pointer{
					width:174px;
					height:228px;
					background:url("images/pointer.png");
					margin:  auto;
					position:relative;
					top: 150px;
					left: 10px;
					
				}
			
			</style>
			<script type="text/javascript">
				var cat=52;//每个扇形的度数
				function startRotate(angle,msg){
					///var turntable=document.getElementById("turntable");此句等价于${"#turntable"},jquery用法
					$("#turntable").rotate({
						angle:0,//角度
						animateTo:3600+angle-10,//转动的圈数
						duration:3000,//持续时间
						callback:function(){
							alert(msg);
						}
					});
				}
				//var rdm=45;
				//预处理函数
				$(function(){
					//var pointer=document.getElementById("pointer");
					//获取转盘指针
					$("#pointer").mouseover(function(){
						//将鼠标指针发生变化
						$(this).css("cursor","pointer");
					});
					$("#pointer").click(function (){
						//生成一个随机整数（1~7）
						var num=parseInt(Math.random()*20+1);
						
						switch(num){
							case 1:
								//转到奖区1
								startRotate(35,"免单4999元");
								//给出中奖信息
								break;
							case 2:
								startRotate(87,"免单50元");
								break;
							case 3:
								startRotate(139,"免单10元");
								break;
							case 4:
								startRotate(191,"免单5元");
								break;
							case 5:
								startRotate(243,"免分期服务费");
								break;
							case 6:
								startRotate(295,"提高白条额度");
								break;
							
							default:
								startRotate(347,"未中奖");
								break;
						}
						//$("#turntable").css("transform","rotate("+rdm+"deg)");
						//alert("欢迎你！");
						//rdm+=360;
						
					});
				})
			</script>
		
		
	</head>
	<body>
		<div id="turntable-bg">
			<div id="turntable"></div>
			<div id="pointer"></div>
		</div>
	</body>

</html>