javascript學習筆記（八）：瀏覽器對象

時間 2020-07-06

標籤 javascript 學習筆記瀏覽器對象欄目 JavaScript 简体版

原文原文鏈接

window對象javascript

 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>

時鐘對象html

一個簡單的時鐘java

 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對象web

新建一個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>