【本站通知】:推荐站点30元/月 顶部三栏广告80一个月,买一个月送一个月,其他广告位请联系QQ客服☞ 点击这里给我发消息 欢迎加入站长之家官方QQ交流群
爱站云低价服务器
高流量 图文广告位出售
高流量 图文广告位出售

网站首页 爱站云资源网 技术教程 正文

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

梦哥 2019-02-25 技术教程 0 评论 查看百度收录

一个娱乐用的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:“双鱼座“,*ed:false},
1:{name:“双子座“,*ed:false},
2:{name:“金牛座“,*ed:false},
3:{name:“巨蟹座“,*ed:false},
4:{name:“狮子座“,*ed:f
alse},
5:{name:“处女座“,*ed:false},
6:{name:“天蝎座“,*ed:false},
7:{name:“魔羯座“,*ed:false},
8:{name:“白羊座“,*ed:false},
9:{name:“射手座“,*ed:false},
10:{name:“天秤座“,*ed:false},
11:{name:“水瓶座“,*ed: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 *()
{
oDiv.innerHTML=““;
oDiv.innerHTML=“十二星座“+oTitle.value+“排名:<br />“;

for(var i=0;i<12;i++)
{
do
{
var iNum=parseInt(Math.random()*12);
}while(oTwelve[iNum].*ed);

oTwelve[iNum].*ed=true;

oDiv.innerHTML+=num2word(i)+“:“+oTwelve[iNum].name+“<br />“;
}

for(var i in oTwelve)
{
oTwelve[i].*ed=false;
}
}

oBtn.onclick=function()
{	
*();
};

oTitle.onkeydown=function(ev){

var oEvent=ev||event;

if(oEvent.keyCode==13)
{
*();
}
};

};
</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>

本文由奇迹博客编辑


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:


温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群

ABOUT US

爱站云网络科技有限公司成立于2017年
创始人:Johnny Kun 由95后的小青年创建
目前公司服务于云计算、网站建设、SEO优化等
团队成员平均3年以上从业经验,核心团队正在不断扩展。

Contact information

QQ:207385345
Phone:15684092120
E-mail:kf@heikw.com
Website:www.heikw.cn

爱站云博客

Copyright © 2016-2018 www.heikw.cn Reserved.备案号:鲁ICP备16035655号

本站采用 Z-BLOG 核心程序 感谢 爱站云 赞助北京云服务器

爱站云安全认证