圆盘抽奖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 id='info'></div><div id='bg'></div><div id='control'><div id='start'>start</div><div id='end'>end</div></div><div 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代码