JavaScript&Dom学习

最新推荐文章于 2022-04-26 15:26:35 发布

Yuncoco

最新推荐文章于 2022-04-26 15:26:35 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/Yuncoco/article/details/90734750

版权

JavaScript

-JavaScript简介
　　前身叫作Livescript，是一种基于对象(js里面很多内容都封装成Object)和事件驱动(Event Driven)、并具有安全性的脚本语言。
JavaScript 作用：被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies(js也可创建cookie,在浏览器里面创建)，以及更多的应用。
JavaScript语言的特点
　　基于对象/动态语言/无需编译，直接解释执行

DOM

DOM:文档对象模型。直白的讲就是Java程序解析结构化文档的时候，在内存中生成的包含当前结构化文档所有内容的一个对象模型。是一门思想，或者更明确的讲是一门访问结构化文档的一种方式。
HTML：就是一个文档，我们可以通过Java语言去解析它，Java是面向对象的语言，可以把HTML里面的每一个元素解析成一个一个的对象;因为只有封装成对象，在程序里面就可以拿到这些内容;
DOM
D Document 文档(HTML文档)
O Object 对象(Java对象)
M Model 模型（会把文档读取出来，封装成一个一个对象，这个每个对象就相当于这个文档的一个模型）

直白的讲，一个实体文件要在内存中形成这么一个对象，这中间肯定需要一些代码的转换操作，而在此我们称呼为DOM解析器。DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。

打字游戏案例

- game.js



//初始分数
var score = 0;
var timer01 = null;
var timer02 = null;
//开始游戏
function beginGame(){
	stopGame(); //开始之前先清空之前的命令
	timer01 = setInterval(randomLetter,1000);
	timer02 = setInterval(moveLetter,20);
}


//暂停游戏
function stopGame(){
	clearInterval(timer01);
	clearInterval(timer02);
	timer01 = null; //暂时时这个定时器变成null
}

//准备数组(里面装所有的字母块)
var letterArrDiv = [];

//产生随机的字母块
function randomLetter(){
	 // A-Z键盘码的范围在65-90 随机生成这个区间中的值，添加到新元素中
	 //一.拿到65到90的数字
	 var letter = String.fromCharCode(parseInt(Math.random()* 26 + 65));
	 
	 //二.创建相应的div字母块元素
	 //2.1把div创建出来(元素在内存中)
	 var newLetterDiv = document.createElement("div");
	 //2.2 给这个div加上样式(class是关键字，在特殊了，所以js使用了className来代替它)
	 newLetterDiv.className = "letterDiv";
	 //2.3 修改这个div距离左边的位置
	 var width = document.documentElement.clientWidth - 120*2;
	 var leftWidth = Math.random()*width + 120;
	 //  如果我们想要单独设置某个元素的样式
	 newLetterDiv.style.left = leftWidth +"px";
	 newLetterDiv.style.top = "0px";
	 //2.4 添加相应的值进去
	 newLetterDiv.innerHTML = letter;
	 //2.5 把字母块放到body中去
	 document.body.appendChild(newLetterDiv);
	 //2.6 把每一个字母块保存起来
	 letterArrDiv.push(newLetterDiv);
}


//让字母块向下移动
function moveLetter(){
	//1.拿到所有的字母块，进行遍历
	for(var i=0;i<letterArrDiv.length;i++){
		var letterDiv = letterArrDiv[i];
		//2.修改字母块的 top样式的值 (这个高度包含px) 40px
		var top = parseInt(letterDiv.style.top) + 2;
		letterDiv.style.top = top + "px";
		
		//判断如果字母块的top位置已经和我文档的高度相同了，它就应该消失
		var clentHeight = document.documentElement.clientHeight-60;
		if(top>=clentHeight){
			//消失就是删除页面中的一个元素
			letterDiv.parentNode.removeChild(letterDiv);
			//从数组中把这个元素删除掉(参数1:位置,参数2:删除的个数)
			letterArrDiv.splice(i,1);
		}
		
	}
}


//监听键盘的按下的事件(会自动传一个事件对象过来)
//e:事件对象
window.onkeydown = function(e){
	if(!timer01){
		return;
	}
	var letter = String.fromCharCode(e.keyCode);
	//遍历数组
	for(var i=0;i<letterArrDiv.length;i++){
		//拿到数组中的每一个元素块中的字母
		var letterDiv = letterArrDiv[i];
		var letterTemp = letterDiv.innerHTML;
		//只要两个值相等，就把这个字母给删除
		if(letterTemp==letter){
			//消失就是删除页面中的一个元素
			letterDiv.parentNode.removeChild(letterDiv);
			//从数组中把这个元素删除掉(参数1:位置,参数2:删除的个数)
			letterArrDiv.splice(i,1);
			//打完一个加一份
			score = score + 1;
			document.getElementById("scoreSpan").innerHTML = score;
			//打掉一个后，就不再操作功能
			break;
		}
	}
}

/**
 * 拿到随机字母的代码分析流程
 */
//for(var i = 0;i<100;i++){
	//1.拿到了 0 - 25的值了
	//console.debug(Math.random()* 26);
	//1.拿到了 65 - 90的值了(有小数)
	//console.debug(Math.random()* 26 + 65);
	//1.拿到了 65 - 90的值了-只有整数
	//console.debug(parseInt(Math.random()* 26 + 65));
	//console.debug(String.fromCharCode(parseInt(Math.random()* 26 + 65)));
//}


//for(var i = 0;i<1000;i++){
//	//获取到宽度(真正游戏区间宽度) 1366 - 240 = 1126
//	var width = document.documentElement.clientWidth - 120*2;
//	//不会出现120以下的值
//	var width2 = Math.random()*width + 120;
//	console.debug(width2);
//}

- game.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		.letterDiv{
			width: 60px;
			height: 60px;
			background: red;
			text-align: center; /*水平居中*/
			line-height: 60px; /*这个值高度和height一样就可以垂直居中*/
			font-size: 40px;
			color: white;
			position: absolute; /*设置一个绝对定位，元素的位置就可以自己决定了*/
			top: 0px;
			left: 0px;
		}
	</style>
	</head>
	<body>
		<button onclick="beginGame()">开始</button>
		<button onclick="stopGame()">暂停</button>
		<span id="scoreSpan" style="color:blue;font-size: 25;">0</span>
	</body>
	<script type="text/javascript" src="js/game.js"></script>
</html>