Unit06： 外部对象概述 、 window 对象 、 document 对象
小代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.确认框 function del() { var b = confirm("确定要删除此数据吗?"); console.log(b); } //2.周期性定时器 function f1() { //启动周期性定时器: //告诉浏览器每隔1000ms调用一次函数. //返回值是定时器的ID,用来停止定时器. var n = 5; var id = setInterval(function(){ console.log(n--); if(!n) { //停止定时器 clearInterval(id); console.log("DUANG"); } },1000); //当前方法f1相当于主线程, //启动定时器相当于启动支线程, //主线程不等待支线程,启动完成后, //立刻执行下一行,即输出了BOOM. //支线程在等待1S后才第一次运行. console.log("BOOM"); } //3.一次性定时器 var id; function f2() { //启动一次性定时器: //让浏览器在5000ms后调用函数, //并且调用一次后就自动停止定时器. id = setTimeout(function(){ console.log("叮叮叮叮叮叮"); },5000); } function f3() { clearTimeout(id); } </script> </head> <body> <input type="button" value="删除" onclick="del();"/> <input type="button" value="倒计时" onclick="f1();"/> <input type="button" value="订闹钟" onclick="f2();"/> <input type="button" value="取消" onclick="f3();"/> </body> </html>
电子时钟显示小案例：setInterval
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #clock { border: 1px solid red; width: 200px; height: 40px; line-height: 40px; font-size: 20px; text-align: center; } </style> <script> //开始 var id; function start1() { if(id) { //id非空,表示定时器已启动,不必再次启动了 return; } //id为空,表示未启动,则启动定时器 id = setInterval(function(){ var d = new Date(); var p = document.getElementById("clock"); p.innerHTML = d.toLocaleTimeString(); },1000); } //停止 function stop1() { clearInterval(id); //停止时清空id,以便于下一次启动 id = null; } </script> </head> <body> <p> <input type="button" value="开始" onclick="start1();"/> <input type="button" value="停止" onclick="stop1();"/> </p> <p id="clock"></p> </body> </html>
发送消息小案例：setTimeout
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #msg { border: 1px solid red; width: 150px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; } </style> <script> //发送 var id; function send1() { if(id) { //id非空,表示已启动,不要启动第2次 return; } //id为空,表示未启动,则启动定时器 //显示正在发送 var p = document.getElementById("msg"); p.innerHTML = "正在发送..."; //延迟3秒,真正发送 id = setTimeout(function(){ p.innerHTML = "已发送"; id = null; },3000); } //撤销 function cancel1() { if(id) { //id非空,表示已启动,此时可以撤销 var p = document.getElementById("msg"); p.innerHTML = "已撤销"; clearTimeout(id); id = null; } //id为空,表示未启动,不必撤销 } </script> </head> <body> <p> <input type="button" value="发送" onclick="send1();"/> <input type="button" value="撤销" onclick="cancel1();"/> </p> <p id="msg"></p> </body> </html>
知识点：
- location
- history
- screen
- navigator
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.location function f1() { var b = confirm("确定要离开吗?"); if(b) { location.href = "http://www.tmooc.cn"; } } function f2() { location.reload(); } //2.history function f3() { history.forward(); } //3.screen console.log(screen.width); console.log(screen.height); console.log(screen.availWidth); console.log(screen.availHeight); //4.navigator console.log(navigator.userAgent); </script> </head> <body> <input type="button" value="达内" onclick="f1();"/> <input type="button" value="刷新" onclick="f2();"/> <input type="button" value="前进" onclick="f3();"/> </body> </html>
知识点二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //onload是页面加载事件,在网页加载完成时 //自动触发.触发时调用对应的匿名函数. window.onload = function(){ //1.读取节点的名称及类型 var p1 = document.getElementById("p1"); console.log(p1.nodeName); console.log(p1.nodeType); //2.读写节点的内容(双标签中间的文本) //2.1 innerHTML(支持标签) console.log(p1.innerHTML); p1.innerHTML = "DOM操作可以<u>读写</u>节点"; //2.2 innerText(不支持标签) var p2 = document.getElementById("p2"); console.log(p2.innerText); p2.innerText = "DOM操作可以<u>查询</u>节点"; //3.读写节点的值 //只有如下表单控件有值:input,textarea,select //input.value //4.读写节点的属性 //4.1通过方法读写(麻烦,万能) var img = document.getElementById("i1"); console.log(img.getAttribute("src")); img.setAttribute("src","../images/02.jpg"); img.removeAttribute("src"); //4.2通过属性名读写(简单,几个) //举例: //读:span.className //写:span.className = "ok" //只有class,style,id可以通过这种方式读写, //其他的属性是非标准的API,即新版浏览器可以 //使用,但旧版浏览器不支持(如a.href). var a = document.getElementById("a1"); console.log(a.style.color); a.style.color = "blue"; } </script> </head> <body> <p id="p1">DOM操作可以<b>读写</b>节点</p> <p id="p2">DOM操作可以<b>查询</b>节点</p> <p id="p3">DOM操作可以<b>增删</b>节点</p> <p> <img src="../images/01.jpg" id="i1"/> </p> <p> <a href="#" style="color:red;" id="a1">顶部</a> </p> </body> </html>
图片轮播案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> div { border: 1px solid red; width: 218px; height: 218px; } .show { display: inline-block; } .hide { display: none; } </style> <script> //页面加载后 window.onload = function() { lunbo(); } var id; //轮播次数 var n = 0; function lunbo() { //启动定时器,每2S执行一次轮播 id = setInterval(function(){ n++; //获取所有图片 var imgs = document.getElementsByTagName("img"); //遍历他们,都隐藏 for(var i=0;i<imgs.length;i++) { imgs[i].className = "hide"; } //将下一张图片显示 var next = n%imgs.length; imgs[next].className = "show"; },2000); } function stop1() { clearInterval(id); } </script> </head> <body> <!-- onmouseover是鼠标悬停事件; onmouseout是鼠标离开事件; hover不是事件,是伪类选择器! --> <div onmouseover="stop1();" onmouseout="lunbo();"> <img src="../images/01.jpg"/> <img src="../images/02.jpg" class="hide"/> <img src="../images/03.jpg" class="hide"/> <img src="../images/04.jpg" class="hide"/> <img src="../images/05.jpg" class="hide"/> <img src="../images/06.jpg" class="hide"/> </div> </body> </html>