javascript中的BOM

本文轉載自查看原文 2019-03-28 17:25 516 js

一·什么是BOM

BOM（Browser Object Model）即瀏覽器對象模型,提供了獨立於內容而與瀏覽器窗口進行交互的對象;由於BOM主要用於管理窗口與窗口之間的通訊，因此其核心對象是window；

BOM由一系列相關的對象構成，並且每個對象都提供了很多方法與屬性.

二·window對象的方法

　　·彈出一個警告框（alert（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
    window.alert('這是一個警告框')
}
</script>
</body>
</html>

View Code

　　·彈出一個確認框（confirm（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()" id="id2">點我</button>
<script>
    //點擊按鈕，提示你按了什么按鈕
function myFunction(){
    var x;
    var r=confirm("你是豬？");
    if (r==true){
        x="你按下了\"確定\"按鈕!";
    }
    else{
        x="你按下了\"取消\"按鈕!";
    }
    document.getElementById("id1").innerHTML=x;
}
</script>
</body>
</html>

View Code

　　·彈出一個提示框（prompt（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()" id="id2">點我</button>
<script>
function myFunction(){
    var x;
    var person=prompt("請輸入你的名字","張三");
    if (person!=null && person!=""){
        x=person + "你快樂嗎？";
        document.getElementById("id1").innerHTML=x;
    }
}
</script>
</body>
</html>

View Code

　　·打開一個新窗口（open（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="f1()" id="id2">點我打開</button>
<script>
    function f1() {
       var mywindow=window.open('','',"width=200,height=200");
        mywindow.document.write('<p>你好呀！</p>');

    }

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

View Code

　　·滾動到指定位置（scrollTo()）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()">點我</button>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滾動 滾動 滾動 滾動 滾動 滾動 滾動 滾動</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function myFunction(){
    window.scrollTo(100,500)
}
</script>
</body>
</html>

View Code

　　·用setTimeout() 和 clearTimeout()設置和停止定時器

<html>
<head>
<meta charset="utf-8">
<title>計時器</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="class1">
    <form>
        <input type="button" value="開始計數!" onclick="f2()" />
        <input type="text" id="txt" />
        <input type="button" value="停止計數!" onclick="f3()" />
    </form>
</div>

<script>
var c=0;
var t;
var timer_is_on=0;
function f1(){
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout(function(){f1()},1000);
}
function f2(){
    if (!timer_is_on){
        timer_is_on=1;
        f1();
    }
}
function f3(){
    clearTimeout(t);
    timer_is_on=0;
}
</script>
</body>

</html>

View Code

　　·用setInterval() 和 clearInterval()設置和停止定時器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>計時器</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="class1">
    <form>
        <input type="button" value="開始計數!" onclick="f2()" />
        <input type="text" id="txt" />
        <input type="button" value="停止計數!" onclick="f3()" />
    </form>
</div>

<script>
var c=0;
var t;
var timer_is_on=0;
function f1(){
    document.getElementById('txt').value=c;
    c=c+1;
}
function f2(){
    f1()
    if (!timer_is_on){
        timer_is_on=1;
        t=setInterval(f1,1000)
    }
}
function f3(){
    clearInterval(t)
    timer_is_on=0;
}
</script>
</body>

</html>

View Code

　　·界面顯示時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: black;
            text-align:center;
            font-size: 25px;
            font-family: "新宋體";
        }
    </style>
</head>
<div></div>
<body>
<div>
    <p id="id2"></p>
</div>
</body>
<script>
    document.getElementsByTagName("BODY")[0].onpageshow = function() {c()};
    function myFunction() {
        var curr=new Date().toLocaleString();
        document.getElementById("id2").innerHTML = curr;
}
function c() {
        myFunction();
        clock1=setInterval(myFunction,1000)

}

</script>
</html>

View Code

三·Navigator 對象（訪問者的瀏覽器詳情）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>navigator對象</title>
</head>
<body>
    
<div id="example"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>
</html>

View Code

四·History 對象

　　·返回一個URL歷史清單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歷史清單</title>
</head>
<body>
<script>
    console.log(history);
    document.write("歷史列表中URL的數量： " + history.length);
</script>
</body>
</html>

View Code

　　·前進后退按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前進后退</title>
</head>
<body>
<input type="button" value="返回" onclick="goback()">
<input type="button" value="前進" onclick="goforward()">
<a href="https://www.baidu.com/">點我</a>
<script>
    function goback(){
    window.history.back()
}
function goforward(){
    window.history.forward()
}
</script>
</body>
</html>

View Code

　　·從歷史清單轉到指定url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后退兩頁</title>
</head>
<body>
<input type="button" value="后退2頁" onclick="goback()">
<script>
    function goback(){
    window.history.go(-2)
}
</script>
</body>
</html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript中的BOM JAVAScript中DOM與BOM的差異分析理解JavaScript中BOM和DOM的關系 javaScript知識體系（中）- DOM、BOM、其它內置對象-總結 javascript中BOM部分基礎知識總結 Javascript之BOM(window對象) JavaScript(4)---BOM詳解 JavaScript BOM對象介紹 javascript-BOM操作 Javascript之BOM與DOM講解