前端 -- JavaScript-BOM

時間 2019-11-15

原文原文鏈接

11.3.17 BOM

BOM：Browser Object Model，瀏覽器對象模型。html

window對象：linux

window對象是JavaScript中的頂級對象。瀏覽器
全局變量、自定義函數也是window對象的屬性和方法。框架
window對象下的屬性和方法調用時，能夠省略window。函數

window.open(url,target)

//url：要打開的地址。
//target：新窗口的位置。能夠是：_blank 、_self、 _parent 父框架。

window.close() - //關閉當前窗口 (只能關閉用js的window.open()打開的頁面,瞭解)
    
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度

1. 定時器

setIntervalurl

setInterval : 每隔一段時間就完成某個操做

var tid = setIterval("func()",n) //每隔n毫秒就調用一次func函數
var tid = setInterval(func,n)

calearInterval(tid) //清除定時器

setTimeoutspa

setTimeout : 每隔一段時間以後執行一次來完成某個操做
var tid = setTimeout(fn,n) //n毫秒以後只調用一次fn函數
var tid = setTimeout("fn()",n)

clearTimeout(tid) //清楚定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   .box{
        width: 100px;
        height: 100px;
        background-color: lightcoral;
   }
</style>
<body>
    <div id="box" class="box"></div>
</body>
<script>
    // window.setTimeout(fn,2000)
    // function fn() {
    //     alert('兩秒後彈出警告框...')
    // }
    setInterval(fn,500)  // 每0.5秒調用一次函數
    function fn() {
        var box = document.getElementById('box') //獲取事件對象
        box.classList.toggle('box') // 若是存在class='box'就刪除,不存在就添加
   }
</script>
</html>

2. location對象

window的子對象 : window.location

屬性:
window.location.href //查看當前網頁的url
window.location.href='http://www.baidu.com' //修改當前網頁的url.修改以後會跳轉
方法:
window.location.reload() //刷新頁面

3. navigator對象

window.navigator 的一些屬性能夠獲取客戶端的一些信息。orm

userAgent：系統，瀏覽器)htm
platform：瀏覽器支持的系統，win/mac/linux對象

console.log(navigator.userAgent);
console.log(navigator.platform);

4. history對象

// 後退：
history.back()
history.go(-1)：0是刷新

// 前進：
history.forward()
history.go(1)

5. screen對象

screen.availWidth  //可用的屏幕寬度
screen.availHeight //可用的屏幕高度

6. onscroll事件

window.onscroll //在頁面的滾動條滾動的時候觸發的事件
document.documentElement.scrollTop //針對獲取瀏覽器的垂直滾動條的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        height: 2000px;
   }
    a{
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
   }
</style>
<body>
    <div></div>
    <a href="#" id="back">回到頂部</a>
</body>
<script>
    window.onscroll = function () {
        var a = document.getElementById('back')
        console.log(document.documentElement.scrollTop)
        if(document.documentElement.scrollTop>500){
            a.style.display = 'block'
       }else{
            a.style.display = 'none'
       }
   }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。