JS制作的十二星座排名生成器代码

时间：2013-05-30 22:26 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>十二星座排名生成器JS代码版</title>
<style>
body{
	background:#ccc;
}
#title{
	margin:0 10px;
}
#sub{
	margin-left:10px;}
#content{
	width:400px;
	height:300px;
	border:1px solid black;
	margin-top:10px;
	padding:10px;
	background:#fff;
	overflow:hidden;
}
</style>
<script>
window.onload=function()
{
	var oTitle=document.getElementById("title");
	var oBtn=document.getElementById("sub");
	var oDiv=document.getElementById("content");
	
	var oTwelve={
		0:{name:"双鱼座",selected:false},
		1:{name:"双子座",selected:false},
		2:{name:"金牛座",selected:false},
		3:{name:"巨蟹座",selected:false},
		4:{name:"狮子座",selected:false},
		5:{name:"处女座",selected:false},
		6:{name:"天蝎座",selected:false},
		7:{name:"魔羯座",selected:false},
		8:{name:"白羊座",selected:false},
		9:{name:"射手座",selected:false},
		10:{name:"天秤座",selected:false},
		11:{name:"水瓶座",selected:false},
	};
	
	function num2word(i)
	{
		switch(i)
		{
			case 0:
				return "第一名";		
			case 1:
				return "第二名";		
			case 2:
				return "第三名";		
			case 3:
				return "第四名";
			case 4:
				return "第五名";
			case 5:
				return "第六名";
			case 6:
				return "第七名";
			case 7:
				return "第八名";
			case 8:
				return "第九名";
			case 9:
				return "第十名";
			case 10:
				return "第十一名";
			case 11:
				return "第十二名";			
		}
	}
	
	function create()
	{
		oDiv.innerHTML="";
		oDiv.innerHTML="十二星座"+oTitle.value+"排名：<br />";
			
		for(var i=0;i<12;i++)
		{
			do
			{
				var iNum=parseInt(Math.random()*12);
			}while(oTwelve[iNum].selected);
			
			oTwelve[iNum].selected=true;
			
			oDiv.innerHTML+=num2word(i)+":"+oTwelve[iNum].name+"<br />";
		}
		
		for(var i in oTwelve)
		{
			oTwelve[i].selected=false;
		}
	}
	
	oBtn.onclick=function()
	{	
		create();
	};
	
	oTitle.onkeydown=function(ev){
		
		var oEvent=ev||event;
		
		if(oEvent.keyCode==13)
		{
			create();
		}
	};
	
};
</script>
</head>
<body>
<h2>请在下面文本框中输入内容，按生成按钮自动生成排名-<a href="http://www.codesocang.com">源码搜藏</a></h2>
<span id="star">十二星座</span><input id="title" type="text" /><span id="rank">排名</span><input id="sub" type="button" value="生成" />
    <div id="content"></div>
</body>
</html>

JS制作的十二星座排名生成器代码

网页特效