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



Day22

• Window的status属性可以控制状态栏的信息

  比如可以在状态栏滚动文字。如下：

• 
  

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

  
  

   

  
  

  • Window对象上机练习

  
  

  

• 源码如下：

• Html：

• 
  	
  		
  			
  		
  	
  		
  
  		
  		
  		
  
  		
  
  				
  
  				
  你
  VS
  电脑
  
  				
  				
  
  				
   Get Ready!
  	
  				
  				
  
  				
  您选择了
  Choice
  
  					
  						---请选择---
  						石头
  						剪刀
  						布
  					
  					
  
  
  				
  
  					
  					
  				
  				
  
  				
  总局数：
  
  				
  		
  		
  	
  

  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

  运行结果：

•   

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

• 这点还需要继续调试！