JavaWeb10.2【JS：BOM对象Window+案例2轮播图、BOM对象Location+案例3自动跳转、BOM对象History】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 /*//警告弹出框 9 alert("hello window"); 10 window.alert("hi");*/ 11 12 /*//确认弹出框 13 var flag = confirm("确定退出吗？"); 14 // alert(flag); 15 if (flag){ 16 alert("已退出，欢迎再次光临！"); 17 }else { 18 alert("手别抖，别乱点！"); 19 }*/ 20 21 /*//输入弹出框 22 var result = prompt("请输入用户名："); //同confirm有确定和取消两个按钮，确定提交框值，取消提交null 23 alert(result);*/ 24 25 </script> 26 </head> 27 <body> 28 <input id="open_btn" type="button" value="打开新窗口"> 29 <input id="close_btn" type="button" value="关闭刚才打开的窗口"> 30 31 <script> 32 var open_btn = document.getElementById("open_btn"); 33 var close_btn = document.getElementById("close_btn"); 34 var new_window; //接收返回的新页面Window对象 35 open_btn.onclick = function () { 36 // open(); //打开浏览器新窗口 37 // open("http://www.baidu.com"); 38 new_window = open("http://www.baidu.com"); 39 }; 40 close_btn.onclick = function () { 41 // close(); //关闭浏览器窗口 close()==window.close(),即只会关闭当前窗口 42 new_window.close(); 43 }; 44 45 46 //一次性定时器 47 /*setTimeout("alert('boom...')", 3000); 48 setTimeout("fun()", 3000); //传入方法名 49 setTimeout(fun, 3000); //直接传入方法引用，对象名*/ 50 function fun() { 51 alert('boomboom...'); 52 } 53 /*var id = setTimeout(fun, 3000); 54 clearTimeout(id); //取消*/ 55 56 //循环定时器 57 // setInterval(fun, 1000); 58 /*var id= setInterval(fun, 1000); 59 clearInterval(id);*/ 60 61 //Window对象的属性之获取其他BOM对象 62 //此处仅举例获取history对象，其他BOM对象同理 63 /*var h1 = window.history; 64 var h2 = history; 65 alert(h1); //[object History] 66 alert(h2); //[object History]*/ 67 68 //Window对象的属性之获取DOM对象 69 /*var openBtn = window.document.getElementById("open_btn"); 70 //document.getElementById("open_btn"); //效果同上，常用这种方式，window可省略 71 alert(openBtn); //[object HTMLInputElement]*/ 72 </script> 73 </body> 74 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <img src="../img/banner_1.jpg" id="img" width="100%"> 9 10 11 <!--分析： 12 1.在页面上使用img标签展示图片 13 2.定义一个方法，修改图片对象的src属性 14 3.定义一个定时器，每隔3秒调用方法一次。--> 15 16 17 <script> 18 var num = 1; 19 function fun() { 20 num++; 21 if (num > 3){ 22 num = 1; 23 } 24 var img = document.getElementById("img"); 25 img.src = "../img/banner_" + num + ".jpg"; 26 } 27 28 setInterval(fun, 2000); 29 </script> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <input type="button" id="btn" value="刷新"> 10 <input type="button" id="goITcast" value="去传智播客官网"> 11 12 <script> 13 //reload方法。定义一个按钮，点击按钮，刷新当前页面 14 var btn = document.getElementById("btn"); 15 btn.onclick = function () { 16 location.reload(); 17 }; 18 19 //获取href 20 var href = location.href; 21 // alert(href); //http://localhost:63342/itheima-javaweb/day10/com/haifei/html/6_BOM%E5%AF%B9%E8%B1%A1Location.html?_ijt=s2sm4ejab03s4ec9c9l3k84o1c 22 23 // 点击按钮，去访问www.itcast.cn官网 24 var goBtn = document.getElementById("goITcast"); 25 goBtn.onclick = function () { 26 location.href = "http://www.itcast.cn"; 27 }; 28 </script> 29 </body> 30 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 p{ 9 text-align: center; 10 font-size: 20px; 11 } 12 span{ 13 color:red; 14 } 15 </style> 16 </head> 17 <body> 18 <p> 19 <span id="time">5</span>秒之后，自动跳转到首页... 20 </p> 21 22 <script> 23 /* 24 分析： 25 1.显示页面效果 <p> 26 2.倒计时读秒效果实现 27 2.1 定义一个方法，获取span标签，修改span标签体内容，时间-- 28 2.2 定义一个定时器，1秒执行一次该方法 29 3.在方法中判断时间如果<= 0 ，则跳转到首页 30 31 */ 32 33 var second = 5; 34 var time = document.getElementById("time"); 35 36 function showTime() { 37 second--; 38 if (second <= 0){ 39 location.href = "https://www.baidu.com"; 40 } 41 time.innerHTML = second + ""; //转为字符串 42 } 43 44 setInterval(showTime,1000); 45 </script> 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="btn" type="button" value="获取当前窗口历史记录个数"> 9 <a href="9_BOM对象History2.html">轮播图页面</a> 10 <input id="forward" type="button" value="前进"> 11 12 <script> 13 var btn = document.getElementById("btn"); 14 btn.onclick = function () { 15 var length = history.length; 16 alert(length); 17 } 18 // 当前窗口为1，在当前窗口打开其他链接，个数++，后退到原该页面，弹出总计个数 19 20 //同浏览器前进按钮功能 21 var forward = document.getElementById("forward"); 22 forward.onclick = function () { 23 history.forward(); 24 } 25 </script> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <img src="../img/banner_1.jpg" id="img" width="100%"> 9 <input id="back" type="button" value="后退"> 10 11 12 <script> 13 var num = 1; 14 function fun() { 15 num++; 16 if (num > 3){ 17 num = 1; 18 } 19 var img = document.getElementById("img"); 20 img.src = "../img/banner_" + num + ".jpg"; 21 } 22 setInterval(fun, 2000); 23 24 //同浏览器后退按钮功能 25 var back = document.getElementById("back"); 26 back.onclick = function () { 27 history.back(); 28 } 29 </script> 30 </body> 31 </html>
