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

最新推荐文章于 2023-04-13 09:50:01 发布

KLeonard

最新推荐文章于 2023-04-13 09:50:01 发布

阅读量1.4k

点赞数

文章标签： dom javascript 对象

本文链接：https://blog.csdn.net/gavin_john/article/details/21642161

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ JavaScript

21 篇文章 0 订阅

订阅专栏

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 οnlοad="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);	
			}

运行结果：