JavaScript浏览器对象模型-BOM-Window 对象-BOM 对象-定时器

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2016-04-21 16:14

window对象

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>window对象</title>
</head>

<body>
    <script>
        /*
            1. 在浏览器环境中Global对象就是window对象
               Global对象的属性和方法就是window对象的属性和方法
            2. 还提供了当前DOM中所有的事件类型
            3. 其他BOM对象都是window对象的属性
            4. window对象提供了属性和方法
            5. HTML5提供的部分新特性
         */
        console.log(window);
        // 1. 变量与属性的关系,函数与方法的关系
        var str = 'string';
        console.log(str);
        console.log(window.str);
        // 2. 获取窗口的宽度和高度
        console.log(window.innerWidth, window.innerHeight);//获得的是可视区域的宽高
        console.log(window.outerWidth, window.outerHeight);//获得的是加上工具条与滚动条窗口的宽度与高度。
        // 3. self属性 -> 表示window对象本身
        console.log(window === window.self);
        // 4. 判断是否为顶级窗口
        console.log(window.top === window.self);// true
    </script>
</body>

</html>

window对象的方法

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>window对象的方法</title>
    <style>
        body {
            margin: 0px;
            height: 2000px;
        }
    </style>
</head>

<body>
    <button id="btn">打开</button>
    <button id="btn2">移动</button>
    <script>
            // scrollBy() 方法可把内容滚动指定的像素数。
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                window.scrollBy(100, 200);
            }
            // 点击按钮,窗口向下移动 2000
            //scrollTo() 方法可把内容滚动到指定的坐标。
            var btn2 = document.getElementById('btn2');
            btn2.onclick = function () {
                window.scrollTo(0, 2000);
            }
    </script>
</body>

</html>

navigator对象

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>navigator对象</title>
</head>

<body>
    <script>
        console.log('浏览器的代码名: ' + navigator.appCodeName);
        console.log('浏览器的名称: ' + navigator.appName);
        console.log('浏览器的平台和版本信息: ' + navigator.appVersion);
        console.log('运行浏览器的操作系统平台: ' + navigator.platform);

        //userAgent 属性返回由客户机发送服务器的 user-agent 头部的值
        var ua = navigator.userAgent;
       
        //判断浏览器
        if (/firefox/i.test(ua)) {
            console.log('当前使用的是 Firefox 浏览器');
        } else if (/chrome/i.test(ua)) {
            console.log('当前使用的是 Chrome 浏览器');
        } else if (/safari/i.test(ua)) {
            console.log('当前使用的是 Safari 浏览器');
        } else if (/msie/i.test(ua)) {
            console.log('当前使用的是 IE 11 之前版本的浏览器');
        } else if ("ActiveXObject" in window) {
            console.log('当前使用的是 IE 11 浏览器');
        }
        //判断操作系统
        if (/windows/i.test(ua)){
            console.log('当前使用的是 Windows 操作系统');
        }else if (/mac/i.test(ua)){
            console.log('当前使用的是 Mac 操作系统');
        }else if (/android/i.test(ua)){
            console.log('当前使用的是 Android 操作系统');
        }else if (/iphone/i.test(ua)){
            console.log('当前使用的是 iPhone 操作系统');
        }
    </script>
</body>

</html>

history对象

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
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>

<body>
    <!--    
         forward(): 实现跳转下一个页面,作用和浏览器的前进按钮一样。
         back(): 实现转跳到上一个页面,作用和浏览器的回退按钮一样。
         go(): 实现跳转到指定的页面。如果为负数表示后退,如果为正数表示前进。
     -->
<script type="text/javascript">
    function goForward() {
        window.history.forward();
    }
    function back() {
            window.history.back();
    }
</script>
    <input type="button" value="下一个页面" onclick="goForward()" />
    <input type="button" value="上一个页面" onclick="back()" />
</body>
</html>

location对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>

<body>
    <script>
        //Location 对象包含了浏览器的地址栏中的信息。该对象主要用于获取和设置地址。
        console.log(location.href);
    </script>
</body>

</html>

定时器

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>

<body>
    <button id="start">开始</button>
    <button id="stop">结束</button>
    <div id="show"></div>
    <script>
        /*
            setInterval(code,time)
            * 参数
              * code - 表示按照指定周期所执行的代码块
                * 最简单的实现方式就是回调函数
              * time - 表示指定周期,以毫秒为单位
            * 返回值 - 作为当前定时器的标识(ID)
            * 问题
              * 导致第一次执行时,会出现指定时间的延迟
         */
        //开始按钮
        var start = document.getElementById('start');
        var show = document.getElementById('show');
        var t;
        start.addEventListener('click',function(){
            showTime();
            t = setInterval(showTime, 1000);
        })

        function showTime(){
            var date = new Date();
            show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds();
        }
        //结束按钮
         /*
            clearInterval(id)
            * id - 表示setInterval()方法的返回值
        */
         var stop = document.getElementById('stop');
         stop.addEventListener('click',function(){
             clearInterval(t);
         })
    </script>
</body>

</html>

延迟调用

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>延迟调用</title>
</head>

<body>
    <button id="btn">按钮</button>
    <button id="end">停止</button>
    <div id="show"></div>
    <script>
          /* setTimeout(code, millisec)
             setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
             setTimeout() 只执行 code 一次。
             如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout() 。
          */
        var btn = document.getElementById('btn');
        var t ;
        btn.addEventListener('click',function(){
             showTime();
         //插入时间的代码
            function showTime() {
                    var date = new Date();
                    show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds();
                     t = setTimeout(showTime, 1000);
                     //单次定时器执行一次,并调用函数,定时器在函数体内,再次调用定时器,实现循环
                }
         });

         //结束执行代码
         //clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
         var end = document.getElementById('end');
         end.addEventListener('click',function(){
             clearTimeout(t);
         })
    </script>
</body>

</html>

向下滑动

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
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>向下滑动</title>
    <style>
        body {
            margin: 0px;
        }
        #show {
            width: 200px;
            /* 高度为 0 */
            height: 100px;
            background-color: lightcoral;
            margin: 0 auto;
            /* 设置为隐藏 */
            /*display: none;*/
        }

    </style>
</head>
<body>
<div id="show"></div>
<script>
    var show = document.getElementById('show');
    /*show.style.display = 'block';

    var t = setInterval(function(){
        var style = window.getComputedStyle(show,null);
        var height = parseInt(style.height);
        // 判断当前的高度是否为 400
        if (height >= 400){
            clearInterval(t);
        } else {
            height++;
            show.style.height = height + 'px';
        }
    },50);*/

    slideDown(show,400);

    /*
        将上述实现的向下滑动效果,封装在一个固定的函数中
        * 设计当前实现向下滑动效果函数的形参
          * elem - 表示实现向下滑动效果的元素
          * maxHeight - 表示元素向下滑动的最大高度值
        * 函数的逻辑与默认设置CSS样式属性的值无关
      */
    function slideDown(elem, maxHeight){
        // 操作的元素默认的display值为none
        elem.style.display = 'block';
        elem.style.height = '0px';

        var t = setInterval(function(){
            var style = window.getComputedStyle(elem,null);
            var height = parseInt(style.height);
            // 判断当前的高度是否为 400
            if (height >= maxHeight){
                clearInterval(t);
            } else {
                height++;
                elem.style.height = height + 'px';
            }
        },50);
    }
</script>
</body>
</html>

移动效果

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
58
59
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>移动效果</title>
    <style>
        body {
            margin: 0px;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
    /*
        * 向右移动
        * 当前元素移动到页面的最右边时 -> 向左移动
        * 向左移动
        * 当前元素移动到页面的最左边时 -> 向右移动
    */
      var box = document.getElementById('box');
      var flag = false;// 定义一个开关,默认向右
      var speed = 1;
      setInterval(function(){
          //speed += 1;
        // 获取可视窗口的宽度
        var WIDTH = window.innerWidth;
        var style = window.getComputedStyle(box, null);
        var left = parseInt(style.left);
        var width = parseInt(style.width);
        //到最右边时
        if(left + width >= WIDTH){
            flag = true;
        }else if(left <= 0){
            flag = false;
        }
        // 判断当前元素移动的方向
            if (flag) {// 向左移动
                left -= speed;
            } else {// 向右移动
                left += speed;
            }
        box.style.left = left + 'px';
        },10);
    </script>
</body>

</html>

事件与动画结合

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件与动画结合</title>
    <style>
        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var body = document.body;
        var opacity = 1;
        //创建div
        document.addEventListener('click',function showTime(event){
            var left = event.clientX;
            var top = event.clientY;
            var div = document.createElement('div');
            div.style.width = 100 + 'px';
            div.style.height = 100 + 'px';
            div.style.borderRadius = '50%';
            // 颜色随机
            var r = parseInt(Math.random() * 255);
            var g = parseInt(Math.random() * 255);
            var b = parseInt(Math.random() * 255);
            div.style.backgroundColor = 'rgb('+ r + ',' + g + ',' + b + ')';
            div.style.display = 'block';
            div.style.position = 'absolute';
            div.style.top = top-50 + 'px';
            div.style.left = left-50 + 'px';
            div.style.opacity = 1;
            body.appendChild(div);
             //慢慢消失
             var style = window.getComputedStyle(div, null);
                t = setInterval(function(){
                    opacity = style.opacity;
                    console.log(opacity);
                    opacity -= 0.05;
                    div.style.opacity = opacity;                              
                }, 1000);

                if (t <= 0) {
                    clearTimeout(t);
                    // 删除当前元素
                }
        })
    </script>
</body>

</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注