JavaScript的BOM对象
所有的全局变量和全局方法都被归在window对象上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="box"> <span>iphone6s</span> <input type="button" value="删除" id="btn" name=""> </div> <script type="text/javascript"> var age=15; function sayAge(){ alert('我'+window.age); } //声明一个全局变量 window.username="marry";//var username="marry"; //声明一个全局方法 window.sayName=function(){ alert("我是"+this.username); } // sayAge(); // window.sayName(); //confirm() //获取按钮,绑定事件 var btn=document.getElementById("btn"); btn.onclick=function(){ //弹出确认对话框 var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！"); if(result){ document.getElementById("box").style.display="none"; } } //弹出输入框 var message=prompt("请输入您的星座","天蝎座"); console.log(message); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>open</title> </head> <body> <input type="button" value="退 出" id="quit" name=""> <script type="text/javascript"> window.onload = function(){ //打开子窗口，显示newwindow.html window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no"); var quit = document.getElementById("quit"); //点击关闭当前窗口 quit.onclick = function(){ window.close(); } } </script> </body> </html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> //setTimeout("alert('hello')",4000); var fnCall=function(){ alert("world"); } var timeout1=setTimeout(function(){ alert("hello"); },2000); clearTimeout(timeout1); //setTimeout(fnCall,5000); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> /*var intervalId=setInterval(function(){ console.log("您好"); },1000); //10秒之后停止打印 setTimeout(function(){ clearInterval(intervalId); },10000);*/ var num=1, max=10, timer=null; //每隔1秒钟num递增一次，直到num的值等于max清除 /*timer=setInterval(function(){ console.log(num); num++; if(num>max){ clearInterval(timer); } },1000)*/ //使用超时调用实现 function inCreamentNum(){ console.log(num); num++; if(num<=max){ setTimeout(inCreamentNum,1000); }else{ clearTimeout(timer); } } timer=setTimeout(inCreamentNum,1000); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .box1{height: 400px;background: #ccc;} .box2{height: 600px;background: #666;} </style> </head> <body> <div class="box1" id="top"></div> <div class="box2"></div> <input type="button" id="btn" value="返回顶部" name=""> <script type="text/javascript"> //console.log(location.href); //console.log(location.hash); var btn=document.getElementById("btn"); btn.onclick=function(){ location.hash="#top"; } console.log(location.pathname); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" value="刷新" id="reload" name=""> <script type="text/javascript"> /*setTimeout(function(){ //location.href='index6.html'; //window.location='index6.html'; location.replace("index6.html"); },1000)*/ document.getElementById("reload").onclick=function(){ //location.reload();//从浏览器的缓存里读取数据刷新 location.reload(true);//强制从服务器读取数据刷新 } </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="index10.html">index10.html</a> <p>这是index9.html</p> <script> // 解析地址栏中的参数(查询字符串) function getParam(){ // 获取参数信息 var url=location.search; if(!url)return null; // 将?号却掉 url=url.substr(1); // 以&号为分隔符分割url地址 var params,param={},arr; params=url.split("&"); // ["city_id=28","city_name=北京"] //console.log(params); // 遍历params这个数组 for(var i=0,len=params.length;i<len;i++){ arr=params[i].split("="); // 将arr[0]作为param这个对象的属性, // 将arr[1]作为param这个对象的属性值 param[arr[0]]=decodeURIComponent(arr[1]); } return param; } var params=getParam(); console.log(params); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box"> 请输入搜索关键字： <input type="text" placeholder="请输入搜索关键字" id="key"> <input type="button" value="搜索" id="search"> </div> <a href="#" id="go">跳转</a> <a href="index11.html">index11.html</a> <script> // 给按钮绑定事件 document.getElementById("search").onclick=function(){ // 获取搜索关键字并对它进行编码 var key=encodeURIComponent(document.getElementById("key").value); // 跳转到指定页面 location.href='index9.html?search_key='+key; } var sea="搜索" document.getElementById("go").href='index.html?key='+encodeURI(sea); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>这是index11.html</p> <p> <a href="index12.html">index12.html</a> </p> <p><input type="button" value="后退" id="btn" name=""></p> <p><input type="button" value="前进" id="btn2" name=""></p> <p><input type="button" value="前进2" id="btn3" name=""></p> <script type="text/javascript"> var btn=document.getElementById("btn"); //点击btn按钮时回到历史记录的上一步 btn.onclick=function(){ // history.back(); history.go(-2); } //点击btn2按钮来到历史记录的下一步 btn2.onclick=function(){ //history.forward(); history.go(1); } //点击btn3按钮来到历史记录的下一步 btn3.onclick=function(){ //history.forward(); history.go(2); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>这是index12.html</p> <p><a href="index13.html">index13.html</a></p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>这是index13.html</p> <p><a href="index13.html">index13.html</a></p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> console.log("页面宽："+screen.availWidth); console.log("页面高："+screen.availHeight); console.log("pageWidth:"+window.innerWidth); console.log("pageHeigth:"+window.innerHeight); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> //检测浏览器类型 function getBrowser(){ //获取userAgent属性 var explorer = navigator.userAgent.toLowerCase(),browser; if(explorer.indexOf("msie")>-1){ browser = "IE"; }else if(explorer.indexOf("chrome")>-1){ browser = "chrome"; }else if(explorer.indexOf("opera")>-1){ browser = "opera"; } return browser; } var explorer = getBrowser(); console.log("您当前使用的是"+explorer+"浏览器"); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>hello window.open</h1> </body> </html>
