js_day22--js DOM编程（window对象3+猜拳游戏）

来源：互联网发布：淘宝大学开网店视频编辑：程序博客网时间：2024/05/21 17:40

Day22

Window的status属性可以控制状态栏的信息
比如可以在状态栏滚动文字。如下：

<html><head><title>window.test</title><script language="javascript" type="text/javascript"><!--function myscroll(){var space_num = 0;//初始空格数var dir = 1;var space_my ="";space_num = space_num+1*dir;if(space_num >50 || space_num <0){dir = dir *(-1);}for(var i =0;i<space_num;i++){space_my = space_my+"";}window.status = space_my+"世界你好！"}function start(){setInterval("myscroll()",100);}//></script></head><body onload="start()"></body></html>

但现在很多浏览器已经没有状态栏了！

Window对象上机练习

源码如下：
Html：

<html><head><title>Game</title><script src="day_22_2.js" language="javascript" type="text/javascript"></script></head><body ><div style=" width:300px;float:left;"><table id="resultTable" align=center><tr><td></td><td></td><td></td></tr></table></div><div style="float:left;width:500px" ><table align=center bgColor=red border=solid><tr align=center><td width=140px>你</br><img id="myImg1" src="1.png"/></td><td><font size=28px>VS</span></td><td width=140px>电脑</br><img id="comImg"  src="2.png"/></td></tr><tr height=50px align=center><td colspan=3> <font id="result" size=28px color=yellow>Get Ready!</font></td></tr><tr align=center><td>您选择了</br><img id="myImg0" src="0.png"/></td><td><font size=10px>Choice</font></td><td><select id="choice" name="choice"><option value="">---请选择---</option><option value="shitou">石头</option><option value="jiandao">剪刀</option><option value="bu">布</option></select></br></br><input type="button" value="想好了，出招" onClick="myChoice()"/></br><input type="button" value="重新来过" onClick="reset()"/></td></tr><tr align=center><td colspan=3 ><span id="total">总局数：</span></br><input type="button" value="显示全部比赛结果"  onClick="showResult()"/></td></tr></table></div></body></html>

Javascript：

//结果类function Result(my,com,result){this.my = my;this.com = com;this.result = result;}//全局var results = new Array();var totalWin = 0;var totalFail = 0;var totalPeace = 0;var totalNum=0;//重置function reset(){results=null;results = new Array();totalWin = 0;totalFail = 0;totalPeace = 0;totalNum=0;total.innerText="总局数："+totalNum+","+totalWin+"赢，"+totalFail+"输，"+totalPeace+"和"}//比赛function myChoice(){var myNum;var mySelect = $("choice");var mySrc0 = $("myImg0");var mySrc1 = $("myImg1");var comSrc = $("comImg");var total = $("total");randNum=Math.floor(Math.random()*3);//产生0~2之间的随机数comSrc.src=randNum+".png";if(mySelect.value==""){window.alert("您还没有选择！");return;}else if(mySelect.value=="shitou"){myNum = 0;mySrc0.src="0.png";mySrc1.src="0.png";}else if(mySelect.value=="jiandao"){myNum = 1;mySrc0.src="1.png";mySrc1.src="1.png";}else if(mySelect.value=="bu"){myNum = 2;mySrc0.src="2.png";mySrc1.src="2.png";}var resultNum = PK(myNum,randNum);var result = new Result(myNum,randNum,resultNum);totalNum = totalNum+1;switch(resultNum){case 0:totalPeace++;break;case 1:totalWin++;break;case 2:totalFail++;break;default:break;}results.push(result);total.innerText="总局数："+totalNum+","+totalWin+"赢，"+totalFail+"输，"+totalPeace+"和";}function PK(myNum,randNum){var result = $("result");if(myNum==randNum){//window.alert("和");result.innerText="Peace";return 0;}else if((myNum-randNum)==-1||(myNum-randNum)==2){//window.alert("You Win");result.innerText="You Win";return 1;}else if((myNum-randNum)==1||(myNum-randNum)==-2){//window.alert("You Fail");result.innerText="You Fail"return 2;}}function changeNumToChar0(num){var char="";switch(num){case 0:char = "石头";break;case 1:char = "剪刀";break;case 2:char = "布";break;default:break;}return char;}function changeNumToChar1(num){var char="";switch(num){case 0:char = "和";break;case 1:char = "赢";break;case 2:char = "输";break;default:break;}return char;}//显示比赛结果function showResult(){var table = $("resultTable");/*var cell = table.rows[0].cells;if(cell!=null){var len = cell[0].innerHTML;window.alert(len);for(var i =0;i<len;i++){table.deleteRow(0);}}*/table.border="solid";table.deleteRow(0);for(var i=0;i<results.length;i++){var result = results[i];var row = table.insertRow(0);var inDex = row.insertCell(0);var x = row.insertCell(1);var y = row.insertCell(2);var z = row.insertCell(3);inDex.innerHTML=i+1;x.innerHTML=changeNumToChar0(result.my);y.innerHTML=changeNumToChar0(result.com);z.innerHTML=changeNumToChar1(result.result);}}//根据id号得到文档对象function $(id){return document.getElementById(id);}

运行结果：

这个小游戏还有一点小Bug，就是在重复点击“显示全部比赛结果”按钮后，左侧的结果并不会先清空，而是接在后面又显示了当前的结果。
这点还需要继续调试！

0 0