抽奖大转盘 js代码 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>抽奖大转盘</title>
  <style type="text/css">
	div{width:650px;height:600px;margin:50px auto;background:url(images/38/turntable-bg.jpg) no-repeat 0 0;position:relative;}
	div #turntable{position:absolute;left:117px;top:59px;transform:rotate(0deg);transition:all 2s ease 0s;}
	div #pointer{position:absolute;left:255px;top:154px;}
  </style>
	<script type="text/javascript">
	window.onload = function(){
		//获取所需元素
		var turntable = document.getElementById('turntable');
		var pointer = document.getElementById('pointer');
		var click_content = 0;
		var timer = 0;
		
		//操作事件
		pointer.onclick = function(){
			if (click_content>=3){
				alert("您没有机会了");
			} else{
					click_content++;
					var gifts = ['未中奖','免单4999元','免单50元','免单10元','免单5元','免分期服务费','提高白条额度']
					//度数索引值和gifts值相对应
					var degrees = [0,56,103,162,208,260,310]
					//从0~6之间抽取一个值作为与gifts相对应的值,对应的就是应该得到的奖品
					var gifts_index = Math.floor(Math.random()*7);
					var degrees_index = gifts_index
					//要转到的度数就是度数的索引值
					turntable.style.transform = "rotate("+(3*360*click_content+degrees[degrees_index])+"deg)";
					//click_content 表示点击次数
					clearTimeout(timer);
					var timer = setTimeout (function(){
						alert(gifts[gifts_index]);
					},3000)
				}
			}
			
	}
		
		
	</script>
 </head>
 <body>
	<div><img id="turntable" src="images/38/turntable.png" alt="" /><img id="pointer" src="images/38/pointer.png" alt="" /></div>
 </body>
</html>

　　

posted @ 2018-04-09 22:17  小白字太白  阅读(716)  评论(0)    收藏  举报