随机

最新推荐文章于 2024-09-16 22:39:45 发布
西张明-辉
最新推荐文章于 2024-09-16 22:39:45 发布
阅读量132
点赞数
分类专栏： HTML 文章标签： html
本文链接：https://blog.csdn.net/shenmohui/article/details/109651283
版权
HTML 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
前端学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽签</title>
<style>
	*{margin:0;padding:0;}
</style>

</head>
<body bgcolor="yellow"> 
<h1 align="center" style="margin-top:50px;margin-bottom:50px;"> 随 机 抽 签</h1>
   <div style="width:960px;height:500px;margin:0 auto;">
		<div style="width:310px;height:400px;float:left;">
			<div id="divName" style="border:3px green  solid;width:300px;height:300px;text-align:center;line-height:200px;">
			</div>	  
			<br/> 
			<input type="button" id="btn" value="姓名开始" onclick="go()" style="margin-left:50px;width:200px;height=80px; font-size:40px"/> 
		</div>


		<div style="width:630px;height:400px;float:right;">
            <!-- 第一组 -->
		   <div style="width:130px;height:150px;float:left;margin-left:10px;margin-top:10px;">
				<div id="Name1" style="border:3px green  solid;width:100px;height:100px;margin-left:6px;margin-bottom:5px;text-align:center;line-height:100px;">
			    </div>	  
			     
			    <input type="button" id="btn1" value="第一组" onclick="go1()" style="width:100px;height=20px; font-size:20px;margin-left:8px;margin-left:8px;  "/> 
		   </div>

		    <!-- 第二组 -->
		    <div style="width:130px;height:150px; float:left;margin-left:10px;margin-top:10px;">
				<div id="Name2" style="border:3px green  solid;width:100px;height:100px;margin-left:6px;margin-bottom:5px;text-align:center;line-height:100px;">
			    </div>	  
			     
			    <input type="button" id="btn2" value="第二组" onclick="go2()" style="width:100px;height=20px; font-size:20px;margin-left:8px;  "/> 
		   </div>

		    <!-- 第三组 -->

		   <div style="width:130px;height:150px; float:left;margin-left:10px;margin-top:10px;">
				<div id="Name3" style="border:3px green  solid;width:100px;height:100px;margin-left:6px;margin-bottom:5px;text-align:center;line-height:100px;">
			    </div>	  
			     
			    <input type="button" id="btn3" value="第三组" onclick="go3()" style="width:100px;height=20px; font-size:20px; margin-left:8px; "/> 
		   </div>


		    <!-- 第四组 -->


		  <div style="width:130px;height:150px; float:left;margin-left:10px;margin-top:10px;">
				<div id="Name4" style="border:3px green  solid;width:100px;height:100px;margin-left:6px;margin-bottom:5px;text-align:center;line-height:100px;">
			    </div>	  
			     
			    <input type="button" id="btn4" value="第四组" onclick="go4()" style="width:100px;height=20px; font-size:20px;margin-left:8px;  "/> 
		   </div>

		    <!-- 第五组 -->

		   <div style="width:130px;height:150px; float:left;margin-left:10px;margin-top:10px;">
				<div id="Name5" style="border:3px green  solid;width:100px;height:100px;margin-left:6px;margin-bottom:5px;text-align:center;line-height:100px;">
			    </div>	  
			     
			    <input type="button" id="btn5" value="第五组" onclick="go5()" style="width:100px;height=20px; font-size:20px;margin-left:8px;"/> 
		   </div>
		    <!-- 第六组 -->
		   <div style="width:130px;height:150px; float:left;margin-left:10px;margin-top:10px;">
				<div id="Name6" style="border:3px green  solid;width:100px;height:100px;margin-left:6px;margin-bottom:5px;text-align:center;line-height:100px;">
			    </div>	  
			     
			    <input type="button" id="btn6" value="第六组" onclick="go6()" style="width:100px;height=20px; font-size:20px;margin-left:8px;"/> 
		   </div>




		</div>
	</div>
 
</body>

<script language="javascript">
    var b,b1,b2,b3,b4,b5,b6;
	var t,t1,t2,t3,t4,t5,t6;
	b=b1=b2=b3=b4=b5=b6=false;
	 
	
	function chooseName()
	{
		//所有人名
		var arr=["张三","李四","王五","龙一","龙二","龙三","龙五","龙六","龙七","龙八","龙九","东一","东二","赵一","赵二","钱一","钱二","王二","王一","马一","马二","马三","赵一","赵二","李二","李一"];

		var i= Math.round((Math.random()*100))%arr.length;
		
		document.getElementById("divName").innerHTML="<font style='color:red;font-size:40px'><h1>"+arr[i]+"</h1></font>";	
		t=setTimeout("chooseName()",40);		
	}

	function go()
	{
	 
	 
		if(b)
		{
			clearTimeout(t);
			b=false;
			document.getElementById("btn").value="姓名开始";

		}
		else
		{
			t=setTimeout("chooseName()",40);
			b=true;	
			document.getElementById("btn").value="结束";
		}
	}    


//  第一组 	 
function chooseName1()
{

	//名字
	var arr=["张三","李四","王五","龙一"];

	var i= Math.round((Math.random()*100))%arr.length;
	
	document.getElementById("Name1").innerHTML="<font style='color:red;font-size:14px'><h1>"+arr[i]+"</h1></font>";	
	t1=setTimeout("chooseName1()",40);		
}

 
function go1()
{
	if(b1)
	{
		clearTimeout(t1);
		b1=false;
		document.getElementById("btn1").value="第一组";

	}
	else
	{
		t1=setTimeout("chooseName1()",40);
		b1=true;	
		document.getElementById("btn1").value="结束";
	}
}    


//  第二组 	 
function chooseName2()
{

	//名字
	var arr=["龙二","龙三","龙五","龙六","龙七"];

	var i= Math.round((Math.random()*100))%arr.length;
	
	document.getElementById("Name2").innerHTML="<font style='color:red;font-size:14px'><h1>"+arr[i]+"</h1></font>";	
	t2=setTimeout("chooseName2()",40);		
}


function go2()
{
	if(b2)
	{
		clearTimeout(t2);
		b2=false;
		document.getElementById("btn2").value="第二组";

	}
	else
	{
		t2=setTimeout("chooseName2()",40);
		b2=true;	
		document.getElementById("btn2").value="结束";
	}
}    

//  第三组 	 
function chooseName3()
{

	//名字
	var arr=["龙八","龙九","东一","东二","赵一"];

	var i= Math.round((Math.random()*100))%arr.length;
	
	document.getElementById("Name3").innerHTML="<font style='color:red;font-size:14px'><h1>"+arr[i]+"</h1></font>";	
	t3=setTimeout("chooseName3()",40);		
}


function go3()
{
	if(b3)
	{
		clearTimeout(t3);
		b3=false;
		document.getElementById("btn3").value="第三组";

	}
	else
	{
		t3=setTimeout("chooseName3()",40);
		b3=true;	
		document.getElementById("btn3").value="结束";
	}
} 


//  第四组 	 
function chooseName4()
{

	//名字
	var arr=["赵二","钱一","钱二","王二"];

	var i= Math.round((Math.random()*100))%arr.length;
	
	document.getElementById("Name4").innerHTML="<font style='color:red;font-size:14px'><h1>"+arr[i]+"</h1></font>";	
	t4=setTimeout("chooseName4()",40);		
}


function go4()
{
	if(b4)
	{
		clearTimeout(t4);
		b4=false;
		document.getElementById("btn4").value="第四组";

	}
	else
	{
		t4=setTimeout("chooseName4()",50);
		b4=true;	
		document.getElementById("btn4").value="结束";
	}
}    

//  第五组 	 
function chooseName5()
{

	//名字
	var arr=["王一","马一","马二","马三"];

	var i= Math.round((Math.random()*100))%arr.length;
	
	document.getElementById("Name5").innerHTML="<font style='color:red;font-size:14px'><h1>"+arr[i]+"</h1></font>";	
	t5=setTimeout("chooseName5()",50);		
}


function go5()
{
	if(b5)
	{
		clearTimeout(t5);
		b5=false;
		document.getElementById("btn5").value="第五组";

	}
	else
	{
		t5=setTimeout("chooseName5()",50);
		b5=true;	
		document.getElementById("btn5").value="结束";
	}
}  
	

	//  第六组 	 
function chooseName6()
{

	//名字
	var arr=["赵一","赵二","李二","李一"];

	var i= Math.round((Math.random()*100))%arr.length;
	
	document.getElementById("Name6").innerHTML="<font style='color:red;font-size:14px'><h1>"+arr[i]+"</h1></font>";	
	t6=setTimeout("chooseName6()",50);		
}


function go6()
{
	if(b6)
	{
		clearTimeout(t6);
		b6=false;
		document.getElementById("btn6").value="第六组";

	}
	else
	{
		t6=setTimeout("chooseName6()",50);
		b6=true;	
		document.getElementById("btn6").value="结束";
	}
} 
	
	   
</script> 
</html>