Browser Object Model "BOM" -- window Object

GlobalObject global Object

All global variables and methods can be placed on Windows

<!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() pop-up prompt box

window.confirm() pops up a confirmation box to confirm that it returns true and cancel to return false

window.prompt() pops up the input box, the input returns content, otherwise returns null

The first parameter is the hint and the second is the default

<!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 Clicked on oh~");
            }
            btn2.onclick=function(){
                var text2=confirm("Are you sure you want to delete Little Cute?");
                if(text2){
                    span.style.display="none";
                }else{
                    return;
                }
            }
            btn3.onclick=function(){
                var text3=prompt("Please enter your favorite color","Fairy powder");
                span2.innerHTML=text3;
            }
        }    
    </script>
</head>
<body>
    <span id="span">I'm cute</span><br>
    //My favorite color is:<span id="span2"></span><br>
    <button id="btn1">alert</button>
    <button id="btn2">confirm</button>
    <button id="btn3">prompt</button>
</body>
</html>

 

window.open() Opens a new window

First parameter: Page

Second parameter: page naming

Third parameter: a set of, about setting new page properties

 

window.close() Close the current window

When I joined the code and wanted to close the window, it was unsuccessful and the console prompted: 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">Open a new window and try it~</button>
    <button id="btn2">Close the new window now</button>
</body>
</html>

Looking at the data, we know that in addition to IE browser, such as Google browser and Firefox browser, window.close() can only be used to close pop-up windows

So, modify the usage, save the window opened by window.open() into a variable, and close the window with.close()

This should be the right way to open 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(){
                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">Open a new window and try it~</button>
    <button id="btn2">Close the new window now</button>
</body>
</html>

New open window closed successfully

javascript is a single-threaded language, that is, code is executed sequentially and can be adjusted in two ways

Delayed call to setTimeout()

There are both anonymous and custom functions

Cancel deferred calls to 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(){
            // Anonymous function
            var timer1=setTimeout(function(){
                alert("Delay 1 s I'll come later!");
            },1000);

            setTimeout(myFun,2000);
            function myFun(){
                alert("Delay 2 s I'll come later!");
            }

            clearTimeout(timer1);//cancel timer1 Delayed invocation of

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

</body>
</html>

 

Intermittent call to setInterval()

clearInterval() cancels intermittent calls

<!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 seconds countdown

<!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>

To make intermittent calls with setTimeout(), you need to call yourself in 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);//First invoked timer

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

Text blinking effect

Note: Text comes with the input method, which is:

I am a fairy

I am a fairy

<!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="★★★I am a fairy★★★";
                }else{
                    text.innerHTML="☆☆☆I am a fairy☆☆☆";
                }    
                i++;            
            },500)

        }    
    </script>
</head>
<body>
    <span id="text">☆☆☆I am a fairy☆☆☆</span>
</body>
</html>

Tags: Javascript Windows IE Google Firefox

Posted on Wed, 05 Feb 2020 08:20:25 -0800 by Deanznet