发表于： 2017-02-14 23:36:10
1 1211
任务2算是完成，
页面跳转使用的显示隐藏由于会多次使用，封装成一个函数
以前接触过其他编程，习惯了重复使用的元素在公用位置建立，像class对象获取定位，但是见不少前辈的视频基本都是用得着的时候再获取，现在还不知道是否有问题，以后再注意
焦点事件和键盘事件同时使用，感觉有比我现在更好的用法，百度不好找啊……
数组的随机排列方法不少，有.push/.splice用法的方法，这次先用最简单的交换位置方式处理
任务2的要点基本这些了，接下来准备搞任务3.
完整代码：
<!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 type="text/css">
*{margin:0px; padding:0px;}
body{width:400px; height:600px;}
.top{
width:100%;
height:50px;
background-color:#46c5e4;
}
.page1{
background-color:#f2f3f3;
}
.game{
width:96%;
margin:0 auto;
background-color:#fefefe;
border-radius:5px;
}
.game-last{
display:block;
height:60px;
line-height:60px;
text-align:center;
margin-top:20px;
font-size:20px;
cursor:pointer;
background:#fefefe url(img/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png) no-repeat right;
}
.game-change{
height:430px;
margin-top:30px;
}
/*****************************************/
.page2{
background-color:#fcfcfc;
display:none;
}
.return{
display:block;
height:50px;
width:40px;
border:none;
cursor:pointer;
background:url(img/return.png);
}
.player{
width:96%;
margin:0 auto;
text-align:center;
}
.mes-top{
height:40px;
line-height:44px;
border-bottom:2px #999 solid;
}
.mes{
padding-top:20px;
height:250px;
border-bottom:1px #999 solid;
}
.mes div{
float:left;
width:48%;
}
.mes span{
display:inline-block;
}
.killer,.civilian{
width:20px;
}
.num-player{
height:150px;
line-height:180px;
}
.num-size{
font-size:18px;
}
.num{
display:inline-block;
margin:10px;
width:35px;
color:#f8bd4a;
font-size:18px;
}
.num-limit{
font-size:12px;
color:#f8bd4a;
}
.num-ok{
display:block;
width:96%;
height:50px;
line-height:50px;
background-color:#f8bd4a;
color:#fff;
font-size:28px;
border:none;
border-radius:5px;
cursor:pointer;
}
/******************************************/
.page3{
background-color:#fcfcfc;
display:none;
}
</style>
</head>
<body>
<div class="page1">
<div class="top"></div>
<input type="button" class="game-last game" value="上次游戏：杀人游戏简单版" />
<div class="game-change game"></div>
</div>
<div class="page2">
<div class="top"><input type="button" class="return-page1 return" /></div>
<div class="mes-top player"><span>玩家配比</span></div>
<div class="mes player">
<div>
<img src="img/杀手.png" /><span>杀手</span><span class="killer"></span><span>人</span>
</div>
<div>
<img src="img/平民.png" /><span>平民</span><span class="civilian"></span><span>人</span>
</div>
</div>
<div class="num-player player">
<span class="num-size">请输入玩家数量</span><input type="text" class="num" /><span class="num-limit">玩家数量为4-18</span>
</div>
<div class="player"><input type="button" class="num-ok" value="去发牌" /></div>
</div>
<div class="page3">
<div class="top"><input type="button" class="return-page2 return" /></div>
<div class="mes-pic"><span>下个任务处理，敬请期待</span></div>
</div>
<script>
var gameChange = document.getElementsByClassName('game-last')[0];
var returnPage1 = document.getElementsByClassName('return-page1')[0];
var returnPage2 = document.getElementsByClassName('return-page2')[0];
var page1 = document.getElementsByClassName('page1')[0];
var page2 = document.getElementsByClassName('page2')[0];
var page3 = document.getElementsByClassName('page3')[0];
var numInput = document.getElementsByClassName('num')[0];
var numKiller = document.getElementsByClassName('killer')[0],
numCivilian = document.getElementsByClassName('civilian')[0];
var numOk = document.getElementsByClassName('num-ok')[0];
var aNum = [];
var gameOk = false;
gameChange.onclick = function(){
pageShow(page2);
}
returnPage1.onclick = function(){
pageShow(page1);
}
returnPage2.onclick = function(){
pageShow(page2);
}
numOk.onclick = function(){
if(gameOk == true){pageShow(page3);}
else{alert("请确定人数");}
}
document.onkeydown = function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e&&e.keyCode == 13){
if(document.activeElement.className == 'num'){
var num = numInput.value;
if(num>=4&&num<=18){
aNum = new Array(num);
var killNum = Math.ceil(num/3);
var civiNum = Math.floor(num*2/3);
numKiller.innerHTML = killNum;
numCivilian.innerHTML = civiNum;
for(var i=0; i<killNum; i++){aNum[i] = 0;}
for(var i=0; i<civiNum; i++){aNum[i+killNum] = 1;}
for(var i=0; i<aNum.length; i++){
var randomNum = parseInt(Math.random()*(num-1));
var j = aNum[randomNum];
aNum[randomNum] = aNum[i];
aNum[i] = j;
}
gameOk = true;
//输出随机数组
console.log(aNum);
}else{
gameOk = false;
alert('数据错误!请输入4-18');
}
}
}
}
function pageShow(obj){
for(var i=1; i<4; i++){
var page = "page" +i;
var pageHide = document.getElementsByClassName("page" +i)[0];
pageHide.style.display = "none";
}
obj.style.display = "block";
}
</script>
</body>
</html>
返回列表
评论