簡單抽獎活動js代碼

代碼如下:(兼容Firefox和ie)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrapper{width:600px;margin:0 auto;text-align: center;}
		.start {padding: 30px; font:36px '微軟雅黑';color:#f00;}
		.btns span{display: inline-block;width: 220px;height: 30px;line-height: 30px;background-color: #e6e6e6;cursor: pointer;margin:0 10px;}
	</style>
</head>
<body>
<div class="wrapper">
	<!-- 開始抽獎 -->
	<div class="start" id="name">禮品隨機挑選!</div>
	<!-- 開始結束按鈕 -->
	<div class="btns">
		<span id="start">開始</span>
		<span id="end">結束</span>
	</div>
</div>	
<script type="text/javascript">
	var giftlist=['iphone7','mackbook','馬爾代夫三日遊','美迪拉克','bmw','自行車'],
		timer=null,
		flag=0;
	var name=document.getElementById('name'),
		startplay=document.getElementById('start'),
		endplay=document.getElementById('end');		
		window.οnlοad=function(){
			
			// 開始事件
			startplay.οnclick=playfun;
			// 停止結束事件
			endplay.οnclick=stopfun;
			// 鍵盤事件
			document.οnkeyup=function(event){
				event=event||window.event;
				if(event.keyCode==13){
					if(flag==0){
						playfun();
						flag=1;
					}
					else{
						stopfun();
						flag=0;
					}
				}
			}
		}
		function playfun(){
			var name=document.getElementById('name'),
		startplay=document.getElementById('start');

			clearInterval(timer);
			timer=setInterval(function(){
				var ran=Math.floor(Math.random()*giftlist.length);
				// console.log(giftlist[ran]);
				name.innerHTML=giftlist[ran];
			},50)
			startplay.style.backgroundColor='#f00';
		}
		function stopfun(){
			clearInterval(timer);
			startplay.style.backgroundColor='#e6e6e6';
		}
</script>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章