window对象
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn1" onclick="openWin1()">按钮点击打开新窗口页面</button> 9 </br> 10 <button id="btn2" onclick="openWin2()">按钮点击打开指定属性的页面</button> 11 </br> 12 <button id="btn3" onclick="closeWin()">关闭页面</button> 13 </br> 14 <script> 15 document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight); 16 function openWin1(){ 17 window.open("xxx.html"); //点击按钮打开新的页面 18 } 19 function openWin2(){ 20 //给打开的页面添加属性：名字、长宽、位置、是否有工具栏、菜单栏 21 window.open("xxx.html","windowname","height=100,width=100,top=100,left=100,toolbar=no,menubar=no"); //点击按钮打开新的页面 22 } 23 function closeWin(){ 24 window.close(); //关闭页面 25 } 26 </script> 27 </body> 28 </html>
时钟对象
一个简单的时钟
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p id="pDate"></p> <!--设置显示日期的标签--> 9 <p id="ptime"></p> <!--设置显示时间的标签--> 10 </br> 11 <button id="btn" onclick="stopTime()">停止计时</button> <!--设置停止计时的按钮标签--> 12 <button id="btn1" onclick="delayAlert()">延时弹窗</button> <!--设置延时弹窗的按钮标签--> 13 <button id="btn2" onclick="alwaysAlert()">不停弹窗</button> <!--设置不停弹窗的按钮标签--> 14 <button id="btn2" onclick="stopAlert()">停止弹窗</button> <!--设置停止弹窗的按钮标签--> 15 <script> 16 var mytime = setInterval(function(){getTime()},1000); //setInterval()间隔指定毫秒数不停执行指定代码，每1000毫秒更新一次 17 //var mytime = setTimeout(function(){startTime();},1000); 18 19 //获取当前时间的函数 20 function getTime(){ 21 var date = new Date(); 22 var d = date.toLocaleDateString(); //获取日期 23 var t = date.toLocaleTimeString(); //获取日期 24 document.getElementById("pDate").innerHTML=d;//显示日期 25 document.getElementById("ptime").innerHTML=t;//显示时间 26 } 27 28 //停止计时的函数 29 function stopTime(){ 30 clearInterval(mytime); //停止setInterval()执行的代码 31 } 32 //延时弹窗的函数 33 function delayAlert(){ 34 var win = setTimeout(function(){alert("延时3000ms弹窗");},3000); //setTimeout()延时指定毫秒数执行代码,延时3000ms弹窗 35 } 36 //不停弹窗的函数 37 var win; 38 function alwaysAlert(){ 39 alert("弹弹弹，根本停不下来！"); 40 win = setTimeout(function(){alwaysAlert();},1000); //setTimeout()延时指定毫秒数执行代码,延时3000ms弹窗 41 } 42 //停止弹窗的函数 43 function stopAlert(){ 44 clearTimeout(win); //clearTimeout清除指定的setTimeout()执行代码 45 } 46 47 </script> 48 </body> 49 </html>
history对象
新建一个test.html文件
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="javascript浏览器对象3.html">Hello 测试,点击跳转到javascript浏览器对象3页面！</a> 9 </br> 10 <button id="btn" onclick="goForward()">点击按钮向前到下一页面</button> 11 12 <script> 13 function goForward(){ 14 history.forward(); //history.forward()打开向前一个页面 15 } 16 </script> 17 </body> 18 </html>
再建一个javascript浏览器对象3.html文件
<!DOCTYPE html> <html> <head lang="en"> <meta chaset="UTF-8"> <title></title> </head> <body> <button id="btn" onclick="goBack()">点击按钮回退到上一页面</button> </br> <form> <input type="text" id="username"> <button id="btn1" onclick="login()">登录</button> </form> <script> function goBack(){ history.back(); //history.back()回退到上一页面 } function login(){ var name = document.getElementById("username").value; if(name=="jerry"){ history.go(-2); //history.go()指定回到历史的哪个页面，上两个页面是-2，上一页面是-1，当前页面是0，下一页面是1 }else{ alert("输入错误"); } } </script> </body> </html>
location对象
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn" onclick="getLocation()">点击按钮获取当前页面Location信息</button> 9 </br> 10 <button id="btn" onclick="skip()">点击跳转到其他页面</button> 11 </br> 12 <p id="pid1"></p> 13 </br> 14 <p id="pid2"></p> 15 </br> 16 <p id="pid3"></p> 17 </br> 18 <p id="pid4"></p> 19 </br> 20 <p id="pid5"></p> 21 </br> 22 <script> 23 function getLocation(){ 24 var p1 = window.location.hostname; //获取web主机域名 25 var p2 = window.location.pathname; //获取当前页面的路径和文件名 26 var p3 = window.location.port; //获取web主机端口 27 var p4 = window.location.protocol; //获取web主机所使用的协议(http://或https://) 28 var p5 = window.location.href; //获取当前页面的URL 29 30 document.getElementById("pid1").innerHTML = "web主机域名:"+p1; 31 document.getElementById("pid2").innerHTML = "当前页面的路径和文件名:"+p2; 32 document.getElementById("pid3").innerHTML = "web主机端口:"+p3; 33 document.getElementById("pid4").innerHTML = "web主机所使用的协议:"+p4; 34 document.getElementById("pid5").innerHTML = "当前页面的URL:"+p5; 35 36 } 37 function skip(){ 38 location.assign("https://www.baidu.com");//跳转到其他网页 39 } 40 </script> 41 </body> 42 </html>
screen对象
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 document.write("高度:"+screen.height+",宽度:"+screen.width+"</br>"); 10 document.write("可用高度:"+screen.availHeight+",可用宽度:"+screen.availWidth); 11 </script> 12 </body> 13 </html>