JavaScript（五）BOM事件：BOM、定时器

最新推荐文章于 2024-11-15 12:28:45 发布

觅远

最新推荐文章于 2024-11-15 12:28:45 发布

阅读量326

点赞数

分类专栏： web前端文章标签： javascript html js

本文链接：https://blog.youkuaiyun.com/JBY2020/article/details/110149966

版权

web前端专栏收录该内容

18 篇文章

订阅专栏

定时器

BOM（浏览器对象模型）：https://www.runoob.com/js/js-window.html

所有浏览器都支持 window 对象，它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员，所以可以通过JS来操作浏览器。全局变量是 window 对象的属性，全局函数是 window 对象的方法， HTML DOM 的 document 也是 window 对象的属性之一，在使用DOM对象的时候通常将window对象省略。

window：代表整个浏览器窗口，同时window也是网页中的全局对象，window 对象和方法：https://www.runoob.com/jsref/obj-window.html，

navigator：代表浏览器的信息，可以通过这个对象识别不同的浏览器，navigator 对象和方法：https://www.runoob.com/jsref/obj-navigator.html

location：储存浏览器的地址栏信息，可以通过这个属性和超链接一样进行浏览器的页面跳转操作，location 对象和方法：https://www.runoob.com/jsref/obj-location.html，userAgent是一个字符串，里面包含用来描述浏览器信息的内容，不同的浏览器有不同的userAgent，可以通过这个属性判断浏览器。此属性是继承自navigator对象，属性声明了浏览器用于 HTTP 请求的用户代理头的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器对象模型</title>
</head>
<body id="bod">
    <button id="btn1">点击</button>
    <script>
        // BOM方法
        var by = document.getElementById("bod");
        by.onload = function () {
            console.log(window);  // 当文档被加载完后查看浏览器对象的属性
            console.log(navigator.userAgent);   // 浏览器用户代理值
        }

        // location方法，事件跳转和刷新
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            // 当鼠标点击页面时，发生跳转
            window.location = "https://www.runoob.com/jsref/obj-location.html";
            // 刷新函数
            //location.reload();
        }
    </script>
</body>
</html>

history：代表浏览器的历史记录，涉及隐私，该对象不能用来获取具体的历史记录，只能操作浏览器的前进和回退。https://www.runoob.com/jsref/obj-history.html

history的几个函数

back(); 此函数用来回退到上一个页面

forward(); 此函数用来前进到下一个页面

go(); 用来跳转指定数量的页面，正数为向前跳转，负数为向后跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录</title>
</head>
<body onload="this">
    <a href="BOM.html">点击</a>
    <script>
        // length属性用来获取浏览的历史数量
        alert("浏览数量："+ history.length);
        // 跳转函数
        history.go(2);
    </script>
</body>
</html>

定时器

定时器的设置和清除

setTimeout、clearTimeout

setInterval、clearInterval

两种定时器的区别：

setTimeout定时器在设定时间时触发一次后结束执行

setInterval定时器每隔设定的时间执行一次函数代码

定时器的设置:setInterval(function(){},times)，定时器函数中包含定时器执行的函数和执行时间（毫秒为单位）。

定时器的清除：和其他事件的清除一样，清除函数放在定时执行定时函数之中，每个定时器函数都有一个定时器标识，这个标识为一个数字，定时器清除时将这个标识传入到清除函数中即可，clearInterval(timer);，通常这个清除的操作都是在某个条件成立时执行的，所以需要写在条件语句中。

案例1：定时移动一个圆形到距离顶部指定距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        #timer{
            width: 100px;height: 100px; background-color: #ff7950;border-radius: 90px;
        }
    </style>
</head>
	<body>
		<button id="btn">点击移动</button>
		<div id="timer"></div>
		<script>
			var btn = document.getElementById("btn"),
				di = document.getElementById("timer");
			btn.onclick = function () {
				// 设置一个函数，在元素移动到指定位置（top值大于500px）的时候停止移动
				var timerid = setInterval(function () {
					// 获取元素原来的左外边界和上外边界值
                    // 更多获取宽度和高度参考：https://blog.youkuaiyun.com/alokka/article/details/81458962
					var oldleft = di.offsetLeft,
						oldtop = di.offsetTop;
					// 给左外边界和上外边界重新赋值
					di.style.marginLeft = oldleft + 90 + "px";
					di.style.marginTop = oldtop + 10 + "px";
					// 将获取到的上外边界值转为int值作为条件判断使用
					var ee = parseInt(di.style.marginTop);
					if(ee >= 500){
					// 当条件达到时，清除定时器操作
					clearInterval(timerid);
					}
				},200)
			}
		</script>
	</body>
</html>

案例2：移动一个正方形到指定位置后停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #timer{
            width: 100px;height: 100px; background-color: #ff7950;
        }
    </style>
</head>
    <body>
        <button id="btn">点击移动</button>
        <div id="timer"></div>
        <script>
            var btn = document.getElementById("btn"),
                di = document.getElementById("timer");
            btn.onclick = function () {
                var timerid = setInterval(function () {
                    var oldleft = getStyle(di,"margin-left");
                    var ol = window.parseInt(oldleft);
                    var newleft = ol + 10;
                    di.style.marginLeft = newleft + "px";
                    // 清除定时器
                    if(newleft >= 800){
                        clearInterval(timerid);
                    }
                },100)
            }
            // 定义一个获取元素属性值的函数
            function getStyle(obj,name) {
                // getComputedStyle函数时js中自带的用来返回元素对象属性的函数
                var styles = getComputedStyle(obj,null);
                return styles[name];
            }
        </script>
    </body>
</html>

案例3：倒计时事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        div#di{
            width: 600px;
            height: 200px;
            margin: auto;
        }
        #time1,#time2{
            width: 500px;
            height: 50px;
            text-align: center;
            padding-top: 20px;
        }
        #downtime{
            font-size: 20px;
            color: green;
        }
        .date1{
            font-size: 15px;
        }
        .date2{
            color: deepskyblue;
            font-size: 20px;
        }
        .date_into1{
            font-weight: bolder;
            font-size: 20px;
            color: black;
        }
        .date3{
            font-size: 15px;
            color: deepskyblue;
        }
        .date_into2{
            font-size: 15px;
            font-weight: bolder;
        }
    </style>
    <script type="text/javascript">
        function getTime() {
            var times = new Date();
            var year = times.getFullYear();
            var mon = times.getMonth();
                mon = mon>9?mon+1:"0"+mon;
            var day = times.getDate(),
                day = day>9?day:"0"+day;
            var hour = times.getHours(),
                hour = hour>9?hour:"0"+hour;
            var min = times.getMinutes(),
                min = min>9?min:"0"+min;
            var sec = times.getSeconds(),
                sec = sec>9?sec:"0"+sec;
            var intoTimes = [year,mon,day,hour,min,sec];

            for (var i=0;i<intoTimes.length;i++){
                var di = document.getElementsByClassName("into");
                di[i].innerHTML = intoTimes[i];
            }
        }
        setInterval("getTime();",1000);


        function downTime() {
            var timestart = document.getElementById("downtime");
            if (timestart.innerText == 0){
                window.location.href = "https://www.baidu.com/";
            }else{
                timestart.innerText = timestart.innerText - 1;
            }
        }
        setInterval("downTime();",1000)
    </script>
</head>
<body>
    <div id="di">
        <div id="time1">
            <span class="date1">敌军还有</span>
            <span id="downtime">30</span>
            <span class="date1">秒到达战场</span>
        </div>
        <div id="time2">
            <span class="date1">现在是北京时间：</span>
            <span class="date_into1 into"></span>
            <span class="date2">年</span>
            <span class="date_into1 into"></span>
            <span class="date2">月</span>
            <span class="date_into1 into"></span>
            <span class="date2">日</span>
            <span class="date_into2 into"></span>
            <span class="date3">:</span>
            <span class="date_into2 into"></span>
            <span class="date3">:</span>
            <span class="date_into2 into"></span>
        </div>
    </div>
</body>
</html>