javascript学习笔记（八）：浏览器对象

window对象

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta chaset="UTF-8">
     <title></title>
 </head>
 <body>
     <button id="btn1" onclick="openWin1()">按钮点击打开新窗口页面</button>
     </br>
     <button id="btn2" onclick="openWin2()">按钮点击打开指定属性的页面</button>
     </br>
     <button id="btn3" onclick="closeWin()">关闭页面</button>
     </br>
     <script>
         document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight);
         function openWin1(){
             window.open("xxx.html");  //点击按钮打开新的页面
         }
         function openWin2(){
             //给打开的页面添加属性：名字、长宽、位置、是否有工具栏、菜单栏
             window.open("xxx.html","windowname","height=100,width=100,top=100,left=100,toolbar=no,menubar=no");  //点击按钮打开新的页面
         }
         function closeWin(){
             window.close();              //关闭页面
         }
     </script>
 </body>
 </html>

时钟对象

一个简单的时钟

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta chaset="UTF-8">
     <title></title>
 </head>
 <body>
     <p id="pDate"></p>        <!--设置显示日期的标签-->
     <p id="ptime"></p>        <!--设置显示时间的标签-->
     </br>
     <button id="btn" onclick="stopTime()">停止计时</button>     　 <!--设置停止计时的按钮标签-->
     <button id="btn1" onclick="delayAlert()">延时弹窗</button>     <!--设置延时弹窗的按钮标签-->
     <button id="btn2" onclick="alwaysAlert()">不停弹窗</button> 　 <!--设置不停弹窗的按钮标签-->
     <button id="btn2" onclick="stopAlert()">停止弹窗</button>      <!--设置停止弹窗的按钮标签-->
     <script>
         var mytime = setInterval(function(){getTime()},1000);     //setInterval()间隔指定毫秒数不停执行指定代码，每1000毫秒更新一次
         //var mytime = setTimeout(function(){startTime();},1000);

         //获取当前时间的函数
         function getTime(){
             var date = new Date();
             var d = date.toLocaleDateString();           //获取日期
             var t = date.toLocaleTimeString();           //获取日期
             document.getElementById("pDate").innerHTML=d;//显示日期
             document.getElementById("ptime").innerHTML=t;//显示时间
         }

         //停止计时的函数
         function stopTime(){
             clearInterval(mytime);　　//停止setInterval()执行的代码
         }
         //延时弹窗的函数
         function delayAlert(){
             var win = setTimeout(function(){alert("延时3000ms弹窗");},3000);　　//setTimeout()延时指定毫秒数执行代码,延时3000ms弹窗
         }
         //不停弹窗的函数
         var win;
         function alwaysAlert(){
             alert("弹弹弹，根本停不下来！");
             win = setTimeout(function(){alwaysAlert();},1000);　　//setTimeout()延时指定毫秒数执行代码,延时3000ms弹窗
         }
         //停止弹窗的函数
         function stopAlert(){
             clearTimeout(win);　　//clearTimeout清除指定的setTimeout()执行代码
         }

     </script>
 </body>
 </html>

history对象

新建一个test.html文件

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta chaset="UTF-8">
     <title></title>
 </head>
 <body>
     <a href="javascript浏览器对象3.html">Hello 测试,点击跳转到javascript浏览器对象3页面！</a>
     </br>
     <button id="btn" onclick="goForward()">点击按钮向前到下一页面</button>

     <script>
         function goForward(){
             history.forward();              //history.forward()打开向前一个页面
         }
     </script>
     </body>
 </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对象

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta chaset="UTF-8">
     <title></title>
 </head>
 <body>
     <button id="btn" onclick="getLocation()">点击按钮获取当前页面Location信息</button>
     </br>
     <button id="btn" onclick="skip()">点击跳转到其他页面</button>
     </br>
     <p id="pid1"></p>
     </br>
     <p id="pid2"></p>
     </br>
     <p id="pid3"></p>
     </br>
     <p id="pid4"></p>
     </br>
     <p id="pid5"></p>
     </br>
     <script>
         function getLocation(){
             var p1 = window.location.hostname;     //获取web主机域名
             var p2 = window.location.pathname;     //获取当前页面的路径和文件名
             var p3 = window.location.port;         //获取web主机端口
             var p4 = window.location.protocol;     //获取web主机所使用的协议(http://或https://)
             var p5 = window.location.href;         //获取当前页面的URL

             document.getElementById("pid1").innerHTML = "web主机域名:"+p1;
             document.getElementById("pid2").innerHTML = "当前页面的路径和文件名:"+p2;
             document.getElementById("pid3").innerHTML = "web主机端口:"+p3;
             document.getElementById("pid4").innerHTML = "web主机所使用的协议:"+p4;
             document.getElementById("pid5").innerHTML = "当前页面的URL:"+p5;

         }
         function skip(){
             location.assign("https://www.baidu.com");//跳转到其他网页
         }
     </script>
     </body>
 </html>

screen对象

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta chaset="UTF-8">
     <title></title>
 </head>
 <body>
     <script>
         document.write("高度:"+screen.height+",宽度:"+screen.width+"</br>");
         document.write("可用高度:"+screen.availHeight+",可用宽度:"+screen.availWidth);
     </script>
     </body>
 </html>