BOM事件 定时器的使用 元素获取的方法 计算器，数组对象表格在网页显示

BOM事件

1.onload事件 会在页面全部加载完之后才会执行

		window.onload = function(){
			console.log("页面全部加载完才执行");
		}
		console.log("页面还在加载");

2.resize 事件

		window.onresize = function(){
			console.log("页面尺寸发生了改变");
		} 

3.scroll事件

		window.onscroll = function(){
			console.log("滚轮改变了");
		} 

4.获取页面尺寸

		console.log(window.innerWidth);
		console.log(window.innerHeight);

定时器

setInterval 是一个定时器功能,能够按照时间间隔执行代码

	  console.log("1");
		console.log("2");
		var timer = setInterval(function(){
			console.log("3");
		},100);
		console.log("4");
		console.log("5");
		clearInterval(timer);//清楚定时器
		

		console.log("1");
		console.log("2");
		var timer1 = setTimeout(function(){
			console.log("3");
		},100);
		console.log("4");
		console.log("5");
		clearTimeout(timer1);//清楚延时器

		for(var i = 0;i<10;i++){
			setTimeout(function(){
				console.log(i);
			},0);
		}

eg:
下面的代码延时器后执行,先执行所有的i++
i=10时结束,然后执行延时器,都为10

		for(var i=0;i<10;i++){
			setTimeout(function() {
				console.log(i);
			}, 0);
		}

元素获取的方法（一二种方法常用）

1。根据ID获取元素 getElementById

		var box = document.getElementById("box"); //div id="box"
		var box1 = document.getElementById("box1");//null

2.根据标签名获取元素集合，集合里面的才是元素 getElementsByTagName

		var lis = document.getElementsByTagName("li");

3.getElementdByName 根据name属性值 获取元素集合 集合里面的才是元素 注:该方法不兼容

		var username = document.getElementsByName("username");

4.getElementsByClassName 根据类名获取集合 ,集合里面的才是元素 注:该方法不兼容

		var className = document.getElementsByClassName("a")[0];

5.querySelector 根据选择器找到一个元素

		var box2= document.querySelector("#box");

6.querySelectorAll 根据选择器找到一个元素集合

		var divs = document.querySelectorAll("div");			

定时器的题目
页面中有两个按钮 当点击第一个时 开始输出内容 点击第二个时 停止输出 这个过程可以重复附加: 当多次点击第一个按钮时 仍旧每一次只有一次输出

<button id="but1">按钮一</button>
	<button id="but2">按钮二</button>
<script>
		var but1 = document.getElementById("but1");
		var but2 = document.getElementById("but2");
		var timer;
		but1.onclick = function (){
			clearInterval(timer);  //函数节流,防止点击第一个按钮越点越快,在点击第二个按钮时不再停止
			timer = setInterval(function(){
				console.log("点击了按钮一");
			},1000)
		}
		but2.onclick = function(){
			clearInterval(timer);
		}
	</script>

网页简易计算器的实现

<table>
		<tr>
			<th>运算符1</th>
			<th>运算符号</th>
			<th>运算数2</th>
			<th>等号</th>
			<th>结果</th>
		</tr>
		<tr>
			<th><input name="num1" /></th>
			<th>+</th>
			<th><input name="num2" /></th>
			<th>=</th>
			<th><input name="result" /></th>
		</tr>
		<tr>
			<th><input name="num1" /></th>
			<th>-</th>
			<th><input name="num2" /></th>
			<th>=</th>
			<th><input name="result" /></th>
		</tr>
		<tr>
			<th><input name="num1" /></th>
			<th>*</th>
			<th><input name="num2" /></th>
			<th>=</th>
			<th><input name="result" /></th>
		</tr>
		<tr>
			<th><input name="num1" /></th>
			<th>/</th>
			<th><input name="num2" /></th>
			<th>=</th>
			<th><input name="result" /></th>
		</tr>
	</table>
	<button id="btn">运算</button>
	<script>
		var num1s = document.getElementsByName("num1");
		var num2s = document.getElementsByName("num2");
		var results = document.getElementsByName("result");
		var btns = document.getElementById("btn");
		
		//给每个num绑定事件
		for(var i=0;i<num1s.length;i++){
			num1s[i].oninput = function(){
				var val= this.value;
				for(var i=0;i<num1s.length;i++){
					num1s[i].value = val;
				}
			}
		}
		for(var i=0;i<num2s.length;i++){
			num2s[i].oninput = function(){
				var val2= this.value;
				for(var i=0;i<num2s.length;i++){
					num2s[i].value = val2;
				}
			}
		}
		
		btns.onclick = function(){
			results[0].value = +num1s[0].value + +num2s[0].value;
			results[1].value = num1s[1].value - num2s[1].value;
			results[2].value = num1s[2].value * num2s[2].value;
			results[3].value = num1s[3].value / num2s[3].value;
		}
	</script>

数组对象表格在网页显示

		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody class="box">
				
			</tbody>
	</table>
	<script>
		var box = document.getElementsByClassName("box")[0];
		var arr = [
		    {
		    name: 'Jack',
		    age: 18,
		    gender: '男'
		    },
		    {
		    name: 'Rose',
		    age: 20,
		    gender: '女'
		    },
		    {
		    name: 'Top',
		    age: 22,
		    gender: '男'
		    }
		]
		for(var i = 0;i<arr.length;i++){
			box.innerHTML +="<tr><td>" + arr[i].name + "</td><td>" + arr[i].age +  "</td><td>" + arr[i].gender +  "</td></tr>";	
		}
	</script>