JS制作的十二星座排名生成器代码
一个娱乐用的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>
发表评论