瀏覽器對象模型“BOM”-- window對象

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/05/12267122.html
-Advertisement-
Play Games

global對象 全局對象 所有的全局變數和全局方法，都可以歸在window上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100 ...


global對象 全局對象

所有的全局變數和全局方法，都可以歸在window上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        var a="aaa";
        console.log(window.a);
    </script>
</head>
<body>

</body>
</html>

 

 window.alert()     彈出提示框

window.confirm()  彈出確認框，確認返回true，取消返回false

window.prompt() 彈出輸入框，輸入內容返回內容，否則返回null

第一個參數為提示信息，第二個參數為預設信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        #span{
            background:#abcdef;
            color:orange;
        }
    </style>
    <script>
        window.onload=function(){
            var span=document.getElementById("span");
            var span2=document.getElementById("span2");
            var btn1=document.getElementById("btn1");
            var btn2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");

            btn1.onclick=function(){
                alert("btn1被點擊了哦~");
            }
            btn2.onclick=function(){
                var text2=confirm("確定刪除小可愛嘛？");
                if(text2){
                    span.style.display="none";
                }else{
                    return;
                }
            }
            btn3.onclick=function(){
                var text3=prompt("請輸入你最喜歡的顏色","仙女粉");
                span2.innerHTML=text3;
            }
        }    
    </script>
</head>
<body>
    <span id="span">我是小可愛</span><br>
    我最喜歡的顏色是：<span id="span2"></span><br>
    <button id="btn1">alert</button>
    <button id="btn2">confirm</button>
    <button id="btn3">prompt</button>
</body>
</html>

 

 window.open() 打開新視窗

第一個參數：頁面

第二個參數：頁面命名

第三個參數：一組，關於設置新頁面屬性

 

 window.close()  關閉當前視窗

當我加入這段代碼想要關閉視窗時，沒有成功，而且控制台提示：Scripts may close only the windows that were opened by it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var btn1=document.getElementById("btn1");

            btn1.onclick=function(){
                window.open("new.html", "new", "width=400,height=400,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
            }
            btn2.onclick=function(){
                window.close();//Scripts may close only the windows that were opened by it.
            }
        }    
    </script>
</head>
<body>
    <button id="btn1">打開新視窗試試~</button>
    <button id="btn2">現在關閉新視窗啦</button>
</body>
</html>

查看資料得知，除了IE瀏覽器之外，像谷歌瀏覽器和火狐瀏覽器等，都規定window.close()只能用於關閉彈出類視窗

於是，修改用法，將window.open()打開的視窗保存到變數中，使用.close()關閉該視窗

這應該就是正確打開方式了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var btn1=document.getElementById("btn1");

            btn1.onclick=function(){
                newWindow=window.open("new.html", "new", "width=400,height=400,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
            }
            btn2.onclick=function(){
                newWindow.close();
            }
        }    
    </script>
</head>
<body>
    <button id="btn1">打開新視窗試試~</button>
    <button id="btn2">現在關閉新視窗啦</button>
</body>
</html>

成功關閉打開的新視窗

javascript是單線程語言，也就是代碼按順序執行，可以通過以下兩個方法調整順序

延遲調用 setTimeout()   

有匿名函數和自定義函數兩種方式

取消延遲調用 clearTimeout()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            // 匿名函數
            var timer1=setTimeout(function(){
                alert("延遲1s後我來啦！");
            },1000);

            setTimeout(myFun,2000);
            function myFun(){
                alert("延遲2s後我來啦！");
            }

            clearTimeout(timer1);//取消timer1的延遲調用

        }    
    </script>
</head>
<body>

</body>
</html>

 

間歇調用 setInterval()

clearInterval() 取消間歇調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var myInterval=setInterval(function(){
                console.log("h");
            },1000);

            setTimeout(function(){
                clearInterval(myInterval);
            },10000);

        }    
    </script>
</head>
<body>

</body>
</html>

 

 10秒倒計時

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var count=document.getElementById("count");
            var myInterval=setInterval(function(){
                var inner=count.innerHTML;
                count.innerHTML=inner-1;
                if(inner<=1){
                    clearInterval(myInterval);
                }
            },1000);

        }    
    </script>
</head>
<body>
    <span id="count">10</span>
</body>
</html>

用setTimeout() 實現間歇調用，則需要在setTimeout()中調用自身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var count=document.getElementById("count");

            function myFun(){
                var inner=count.innerHTML;
                count.innerHTML=inner-1;
                if(inner>1){
                    setTimeout(myFun,1000);
                }else{
                    clearTimeout(firstTimer);
                }
            }
            var firstTimer=setTimeout(myFun,1000);//首次調用的定時器

        }    
    </script>
</head>
<body>
    <span id="count">10</span>
</body>
</html>

文字閃爍效果

註意：文字都是輸入法自帶的，分別是：

★★★我是仙女★★★

☆☆☆我是仙女☆☆☆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        #text{
            color:orange;
        }
    </style>
    <script>
        window.onload=function(){

            var text=document.getElementById("text");
            var i=0;
            setInterval(function(){
                if(i%2==1){
                    text.innerHTML="★★★我是仙女★★★";
                }else{
                    text.innerHTML="☆☆☆我是仙女☆☆☆";
                }    
                i++;            
            },500)

        }    
    </script>
</head>
<body>
    <span id="text">☆☆☆我是仙女☆☆☆</span>
</body>
</html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 01-Flink運行架構
    1.flink運行時的組件 ​ Flink 運行時架構主要包括四個不同的組件，它們會在運行流處理應用程式時協同工作： 作業管理器（JobManager）、資源管理器（ResourceManager）、任務管理器（TaskManager）， 以及分發器（Dispatcher）。因為 Flink 是用 ...
  • 「Kafka」Kafka中offset偏移量提交
    在消費Kafka中分區的數據時，我們需要跟蹤哪些消息是讀取過的、哪些是沒有讀取過的。這是讀取消息不丟失的關鍵所在。Kafka是通過offset順序讀取事件的。如果一個消費者退出，再重啟的時候，它知道從哪兒繼續讀取消息進行處理。所以，消費者需要「提交」屬於它們自己的偏移量。如果消費者已經提交了偏移量，... ...
  • 如何在IDEA的maven項目中連接並使用MySQL8.0
    首先看一下我的基本的開發環境： 操作系統：MacOS 10.13.5 編輯器：IDEA 2018.3 其他：MySQL8.0.15、Maven 3.3.9、JDK 1.8 好，下麵就正式開始： 第一步：在IDEA中新建一個maven項目 1.使用骨架創建maven項目，此處選擇：maven-arch ...
  • 資料庫操作函數筆記
    2020-02-05 mysqli擴展 phpl連接Mysql mysqli_connect($servername,$username,$password,$database,$port); //參數1:連接的主機 參數2:資料庫登錄賬號 參數3:資料庫登錄密碼 參數4:將要連接的資料庫 參數5: ...
  • redis 5.0.7 源碼閱讀——整數集合intset
    redis中整數集合intset相關的文件為：intset.h與intset.c intset的所有操作與操作一個排序整形數組 int a[N]類似，只是根據類型做了記憶體上的優化。 一、數據結構 1 typedef struct intset { 2 uint32_t encoding; 3 uin ...
  • android sdk manager 無法更新，解決連不上dl.google.com的問題
    android sdk manager 無法更新，解決連不上dl.google.com的問題 ...
  • Binder基本使用
    Android開發中，Binder是一種跨進程通信方式，而使用AIDL可以實現Binder的工作。 如何使用它是瞭解它的第一步，本文章主要記錄使用Binder的一些步驟。（代碼思路參考《Android開發藝術探索》任玉剛 著） 1.創建兩個activity 兩個activity（OneActivit ...
  • Kotlin DSL for HTML實例解析
    Kotlin DSL, 指用Kotlin寫的Domain Specific Language. 本文通過解析官方的Kotlin DSL寫html的例子, 來說明Kotlin DSL是什麼. 首先是一些基礎知識, 包括什麼是DSL, 實現DSL利用了那些Kotlin的語法, 常用的情形和流行的庫. ... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類