用js做一个数字华容道

最新推荐文章于 2023-01-18 13:10:50 发布

迷你世界杨桃（会C++）

最新推荐文章于 2023-01-18 13:10:50 发布

阅读量506

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/void_and_sans/article/details/128435308

版权

我很喜欢华容道啊，这次用js做一个

话不多说上代码

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>5x5数字华容道</title>
		<style type="text/css">
			.div1 {
				width: 518px;
				height: 518px;
				background-color: #6C6C6C;
			}
			
			.div2 {
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 3px;
				margin-top: 3px;
				background-color: #FFA042;
				text-align: center;
				font-size: 80px;
				color: #842B00;
			}
			
			.div3 {
				margin-top: 20px;
				width: 512px;
				height: 80px;
				/*border: solid;*/
				border-color: #000000;
				text-align: center;
			}
			
			.buttonStyle {
				width: 150px;
				height: 50px;
				font-size: 30px;
				margin-top: 15px;
				border-radius: 5%;
				background-color: #97CBFF;
			}
			
			.timeText {
				margin-left: 60px;
				font-size: 30px;
			}
			
			.inputStyle {
				float: auto;
				width: 100px;
				height: 30px;
				font-size: 30px;
			}
		</style>
		<script type="text/javascript">
			/**
			 * 5x5数字华容道，一共有25个格子，我们可以为每一个格子标记下标，通过下标来找到对应的div元素对象
			 * 格子下标从0开始，每个格子的下标如下所示：
			 *  0,  1,  2,  3,  4,
			 *  5,  6,  7,  8,  9,
			 * 10, 11, 12, 13, 14,
			 * 15, 16, 17, 18, 19,
			 * 20, 21, 22, 23, 24
			 */
			window.onload = function() {
				/**
				 * 定义数字数组numArray，值为0~25，该数组中的元素则为每个格子中显示的数字
				 * 同时定义div元素节点对象的数组divObjArray，每一个数组元素均为div元素节点对象
				 * 		通过遍历方式，依次对每个数组元素赋值
				 * 
				 * 为何div元素节点对象通过getElementsByClassName()方法一次性获取到一个对象数组呢？这样明显是更简洁啊
				 * 		因为IE浏览器8.x及以下均不支持getElementsByClassName()方法，为了兼容IE 8.x以下，就放弃了该方式
				 */
				var numArray = new Array(25);
				var divObjArray = new Array(25);
				for(var i = 0; i < divObjArray.length; i++) {
					numArray[i] = i + 1;
					divObjArray[i] = document.getElementById("index_" + i);
				}
 
				/**
				 * 定义“开始游戏”按钮的元素节点对象startButton
				 * 		开始游戏按钮绑定单击响应函数，当玩家点击按钮后，更改按钮显示字样，更改按钮颜色；
				 * 		游戏顺利通关后，复位按钮；
				 * 定义计时器timer
				 * 		定时器设置计时函数timing，
				 * 		当玩家点击开始按钮进入游戏后，定时器开始计时；
				 * 		游戏顺利通关后，复位计时器；
				 * 定义计时器所示时间文本的元素节点对象timeText
				 * 		游戏快开始后，每秒显示当前