代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1{ margin-left: 40px; margin-top: 40px; } </style> </head> <body> <table border="1px" cellspacing="0px"><!-- border设置表格边线，cellspacing设置边框的边距 --> <tr> <td> <p>我方出拳</p> <img src="img/2.png" id="img2"> </td> <td>VS</td> <td> <p>敌方出拳</p> <img src="img/3.png" id="img3"> </td> </tr> <tr> <td colspan="3"> <p id="result">PLEASE CHOLCE</p> </td> </tr> <tr> <td> <p>我方选择的是</p> <img src="img/2.png" id="img1"> </td> <td>请出拳</td> <td> <div class="div1"> <select onchange="changeImg()" id="choiceSelect"> <option value="2">剪刀</option> <option value="1">石头</option> <option value="3">布</option> </select> </div> <div class="div1"> <input type="button" value="想好了出拳" onclick="getChoice()"> </div> <div class="div1"> <input type="button" value="查看结果" onclick="showresult()"> </div> </td> </tr> <tr> <td colspan="3" id="finalresult"> <p>您玩了0局，您平0次，赢0次，输0次</p></td> </tr> </table> <script type="text/javascript"> // n1代表我方数 var n1 = 2; var peace = 0; var win = 0; var lose = 0; var all = 0 function changeImg(){ var choiceSelect = document.getElementById("choiceSelect"); n1 = choiceSelect.value; document.getElementById("img1").src = "img/"+n1+".png"; } function getChoice(){ //n2代表敌方数 var n2 = parseInt(Math.random()*3)+1; // alert(n2); document.getElementById("img2").src = "img/"+n1+".png"; document.getElementById("img3").src = "img/"+n2+".png"; pk(n1,n2); } function pk(n1,n2){ var result = document.getElementById("result"); if (n1-n2 == 0) { result.innerHTML = "你和计算机平"+n1+"-------"+n2; peace++; } if (n1-n2 == -1||n1-n2 == 2) { result.innerHTML = "你赢了！！！"+n1+"-------"+n2; win++; } // if (n1-n2 == 1) { if (n1-n2 == 1||n1-n2 == -2 ) { // getChoice(); result.innerHTML = "你输了！！！"+n1+"-------"+n2; lose++; } all++; document.getElementById("finalresult").innerHTML = "<p>您玩了"+all+"局，您平"+peace+"次，赢"+win+"次，输"+lose+"次</p>"; } function showresult(){ document.getElementById("finalresult").innerHTML = "<p>您玩了"+all+"局，您平"+peace+"次，赢"+win+"次，输"+lose+"次</p>"; } </script> </body> </html>
changeImg：获取选择的结果，显示对应的图片
n1：为获取下拉框选择的结果的内容
getChoice：获取0-1的随机数（不包括1）乘以3向下取整+1，得到的数为1，2，3
pk：计算输赢（例如：当我选石头为1，电脑选剪刀为2，那么n1-n2等于-1，所以判断如果结果等于-1时为我赢。一共有九种可能）
图片：
