极客观点
项目管理
HarmonyOS
已经能够猜拳了，输赢 you win you lose 平局 draw
现在想要统计输赢局数：
目前我的想法是新建两个空数组，然后用innerHTML获取 you Win 或者 you Lose
然后判断 如果是 you Win 或者 you Lose 然后就 数组.push()方法 增加一个数组元素
最后输赢局数就是 数组.length-1
但是我发现这样做还是不行啊
两张小图片：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>猜拳小游戏</title>
<style type="text/css">
div,img{margin:0px; padding:0px;border:none;}
.box{
background:#562515;
width:300px;
height:350px;
margin:0 auto;
text-align:center;
}
span{color:#fff;}
/*上中下3个div宽度和边框*/
.top,.center,.buttom{
width:100%;
border-bottom:solid 1px #fff;
}
.top,.buttom{
height:125px;
}
/*top开始*/
.top-left,.top-center,.top-right{
height:125px;
float:left;
}
.top-left,.top-right{
width:125px;
}
.top-center{
width:48px;
line-height:125px;
border-left:solid 1px #fff;
border-right:solid 1px #fff;
}
/*center开始*/
.center{
height:50px;
line-height:50px;
}
.center>span{
font-size:25px;
color:red;
}
/*button开始*/
.button-left,.button-center,.button-right{
height:125px;
float:left;
}
.button-left,.button-right{
width:125px;
}
.button-center{
width:48px;
line-height:130px;
border-left:solid 1px #fff;
border-right:solid 1px #fff;
}
/*button-t开始*/
.button-t{
width:100%;
height:50px;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div class="top-left"><span>你</span><br><img src="./image/Image 144.png"></div>
<div class="top-center"><span>VS</span></div>
<div class="top-right"><span>电脑</span><br><img src="./image/Image 145.png"></div>
</div>
<div class="center"><span id="choice"></span></div>
<div class="buttom">
<div class="button-left"><span>你选择了</span><br><img src="./image/Image 145.png"></div>
<div class="button-center"><span>choice</span></div>
<div class="button-right">
<div class="select"><span>你选择出拳：</span>
<form name="myForm">
<select name="mySelect" id="mySelect">
<option value="石头">石头</option>
<option value="剪刀">剪刀</option>
<option value="布">布</option>
</select>
<input type="button" value="想好了,出拳" onclick="punch()">
<input type="button" value="重新再来过">
</form>
</div>
</div>
</div>
<div class="button-t"><span>总局数:2赢: 1输</span></div>
</div>
<script type="text/javascript">
var computer = new Array("石头","剪刀","布");//computer 电脑
function punch()
{
var my_val = document.myForm.mySelect.value;//获取下拉框的值
var j = Math.random() * computer.length ;//random() 返回 0 ~ 1 之间的随机数。
var k = Math.floor(j);//floor(x) 对数进行下舍入。
var computer_val = computer[k];//随机输出 石头 剪刀 布
var choice = document.getElementById("choice");
var choice_val = choice.innerHTML;
if(my_val == "石头" && computer_val =="石头")
{
choice_val = "draw!";//平手
choice.innerHTML = choice_val;
}else if(my_val == "剪刀" && computer_val =="剪刀")
{
choice_val = "draw!";//平手
choice.innerHTML = choice_val;
}else if(my_val == "布" && computer_val =="布")
{
choice_val = "Draw!";//平手
choice.innerHTML = choice_val;
}else if(my_val == "石头" && computer_val =="剪刀")
{
choice_val = "You Win!";//你赢
choice.innerHTML = choice_val;
}else if(my_val == "石头" && computer_val =="布")
{
choice_val = "You Lose!";//你输
choice.innerHTML = choice_val;
}else if(my_val == "剪刀" && computer_val =="石头")
{
choice_val = "You Lose!";//你输
choice.innerHTML = choice_val;
}else if(my_val == "剪刀" && computer_val =="布")
{
choice_val = "You Win!";//你赢
choice.innerHTML = choice_val;
}else if(my_val == "布" && computer_val =="石头")
{
choice_val = "You Win!";//你输
choice.innerHTML = choice_val;
}else if(my_val == "布" && computer_val =="剪刀")
{
choice_val = "You Lose!";//你输
choice.innerHTML = choice_val;
}
alert("电脑出" + computer_val)
}
</script>
</body>
</html>
初始化两个全局变量为0，
在 punch 函数里，那些if else部分，定义 winCount/failCount++，用 innerHTML 方法把最新的 winCount/failCount 更新