圓盤抽獎HTML5+JS編寫

2024-09-05 12:18:52

字體：大中小

來源：轉載

供稿：網友

JavaScript+HTML5共同實現的簡單網頁抽獎——圓盤抽獎，實際上不是圓盤啊，是方圈哈，點擊“Start”文字可開始抽獎，停止時候我好像覺得是按按鍵盤上的“Esc”鍵，轉盤停止后會顯示出抽獎結果。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圓盤抽獎HTML5編寫的</title><style>#bg {	position:relative;	height:250px;}#bg div {	background-color:#a00;	width:50px;	height:50px;	position:absolute;}</style></head><body><div   class="iwvjtn8m0"   id='info'></div><div   class="iwvjtn8m0"   id='bg'></div><div   class="iwvjtn8m0"   id='control'><div   class="iwvjtn8m0"   id='start'>start</div><div   class="iwvjtn8m0"   id='end'>end</div></div><div   class="iwvjtn8m0"   id='show'></div><script type="text/javascript">var dom_bg = document.getElementById('bg')	,timer = null	,speed = 300	,index = 0	,field 	,dom_field =[]	,stepall	,stepfast = 7	,stepslow	,stepping =0	,selected	,running = false	,stop = false	,flag = false;function setup(){	drawBg();	initField();}function drawBg(){	for(var i=0;i<5;i++){		for(var j=0;j<5;j++){			if(i==0||i==4||j==0||j==4){				var div = document.createElement('div');				div.style.left = i*50 + 'px';				div.style.top = j*50 + 'px';				div.innerText = i + '-' + j;				div.id = 'cell-'+i+'-'+j;				dom_bg.appendChild(div);			}		}	}}function initField(){	field = ['cell-0-0','cell-1-0','cell-2-0','cell-3-0','cell-4-0','cell-4-1',	         'cell-4-2','cell-4-3','cell-4-4','cell-3-4','cell-2-4','cell-1-4',	         'cell-0-4','cell-0-3','cell-0-2','cell-0-1'];	for(var i=0;i<16;i++){		dom_field.push(document.getElementById(field[i]));	}}function rotate(){	if(!flag && stepping>7){		clearTimer();		speed = 100;		timer = setInterval(rotate,speed);	}	if(flag && stepping > stepslow && stepping <stepall){		clearTimer();		speed = 300;		timer = setInterval(rotate,speed);	}	if(index ==16){		index = 0;	}	if(flag && stepping == stepall){		clearTimer();		happy();	}	eraseCell();	drawCell();	index++;	stepping++;}function eraseCell(){	var pre = index -1;	if(pre<0){		pre = 15;	}	dom_field[pre].style.backgroundColor = '#a00';}function drawCell(){	dom_field[index].style.backgroundColor = '#613';}function createStop(){	selected = Math.floor(Math.random() * 15);//從0-15個數字中選   想zb在這控制一下。	var circle = Math.floor(Math.random()*3) + 2;	var c_step = circle *16;	var   actualIndex = stepping%16;	stepall =  selected - actualIndex + c_step;	flag = true;	stepslow = stepall - 7;	stepping = 0;}function happy(){	document.getElementById("show").innerText = selected + '選上了';}function startClick(){	if(running){		return;	}	running= true;	timer = setInterval(rotate,speed);}function endClick(){	if(stop){		return;	}	stop = true;	clearTimer();	createStop();	timer = setInterval(rotate,speed);}function clearTimer(){	clearInterval(timer);	timer = null;}setup();document.getElementById('start').addEventListener('click',startClick,false);document.getElementById('end').addEventListener('click',endClick,false);</script></body></html>

上一篇：HTML5打飛機網頁游戲

下一篇：真正的網頁抽獎-JavaScript HTML5代碼