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

2024-09-05 12:21:07

字体：大中小

来源：转载

供稿：网友

一个娱乐用的JS小程序，上传到网站上作为一个页面来展示了，可计算十二星座的排名，打开页面后在文本框中输入内容，点击“生成”按钮即可自动生成排名，呵呵，只是为个人JS练手所写，有喜欢的拿去改造使用吧。

<!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>请在下面文本框中输入内容，按生成按钮自动生成排名</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>

上一篇：类似模方的网页益智游戏代码

下一篇：网页版字母华容道游戏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注