抽獎大轉盤 js代碼

時間 2019-11-13

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。