BOM 浏览器

发表于 | 更新于: | 分类于 | | 热度 ℃

重点：

1.location 主机
2.history
3.navigator 判断浏览器所在系统
4.window.onload 页面加载完成
5.定时器

history

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = function () {
    let btn = document.querySelectorAll("input");

    btn[0].onclick = function () {
        window.location.href = "9_tui.html";
    }

    // 方法一
    // btn[1].onclick = function () {
    //     window.history.forward();
    // }

    // 方法二
    btn[1].onclick = function () {
        window.history.go(1);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function () {
    let btn = document.querySelector("input");
    // 方法一
    // btn.onclick = function () {
    //     window.history.back();
    // }

    // 方法二
    btn.onclick = function () {
        window.history.go(-1);
    }
}
1
2
3
4
// 通过 platform 可以判断浏览器所在打系统平台类型
console.log(window.navigator.platform);
//
console.log(window.navigator.userAgent);

定时器一

1
2
3
4
5
6
7
8
9
//定义开启定时器 setInterval
let time = setInterval(function () {
    console.log("ss");
},1000)

//关闭定时器 clearInterval
btn.onclick = function () {
    window.clearInterval(time);
}

定时器二 一次性定时器

1
2
3
4
5
6
7
8
9
let btn = document.querySelector("input");
// 一次性定时器
let time = setTimeout(() => {
    alert("你好");
}, 1000);
// 清理定时器
btn.onclick = () => {
    clearTimeout(time)
}

小案例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        div {
            width: 600px;
            height: 600px;
            border: 2px solid pink;
            background-color: #000;
            position: relative;
        }
        span {
            font-size: 30px;
            color: yellow;
            position: absolute;
        }
    </style>

</head>

<body>
    <input type="button" value="亮起来">
    <div>

    </div>
</body>

<script>
    let btn = document.querySelector("input");
    let div = document.querySelector("div");
    let time = null;

    btn.onclick = function () {
        div.innerHTML = "<span>⭐️</span>";
        time = setInterval(function () {
            let x = parseInt(Math.random() * 600 + 1);
            let y = parseInt(Math.random() * 600 + 1);
            div.firstElementChild.style.left = x + "px";
            div.firstElementChild.style.top = y + "px";
        }, 500);
    }
</script>

</html>

小案例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        span {
            font-size: 30px;
            color: red;
            position: absolute;
            top: 500px
        }
    </style>

</head>

<body>
    <img src="" alt="">
    <div class="dv">
        <span></span>
    </div>
</body>

<script>
    f1 = () => {
        let dv = document.querySelector(".dv");
        let span = document.querySelector("span");
        let dt = new Date();
        let img = document.querySelector("img");

        let nian = dt.getFullYear(); //获取完整的年份(4位,1970-????)
        let yue = dt.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        let ri = dt.getDate(); //获取当前日(1-31)
        let hour = dt.getHours(); //获取当前小时数(0-23)
        let fen = dt.getMinutes(); //获取当前分钟数(0-59)
        let second = dt.getSeconds(); //获取当前秒数(0-59)

        yue = yue < 10 ? "0" + yue : yue;
        ri = ri < 10 ? "0" + ri : ri;
        fen = fen < 10 ? "0" + fen : fen;
        hour = hour < 10 ? "0" + hour : hour;
        second = second < 10 ? "0" + second : second;
        img.src = "meimei/" + hour + "_" + second + ".jpg";
        let aa = nian + "年" + yue + "月" + ri + "日" + hour + "时" + fen + "分" + second + "秒";
        span.innerText = aa;
        // dv.innerHTML = "<span>ss</span>"
        console.log(aa);
    }

    setInterval(f1, 1000);
</script>

</html>
-------------本文结束感谢您的阅读-------------
0%