关于Bom

最新推荐文章于 2024-07-30 10:56:44 发布

糖炒板栗哟~

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量163

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/tcbly/article/details/121705329

版权

一.什么是Bom

1.关于bom的定义在这里插入图片描述
2.window对象包含的核心对象

二.窗口对象window

1.window的常用方法
在这里插入图片描述

2.定时器

定义：

什么叫定时器？我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。
定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。

在这里插入图片描述
setTimeout()和clearTimeout()；

在这里插入图片描述
setInterval()和clearInterval()；

a.在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

b.在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。
下面展示一些 内联代码片。

定时器示例


        /*
          倒计数
            5 4 3 2 1  每隔1s秒输出 
        */

        // for(var i = 5; i > 0; i--){
        //     console.log(i);
        // }

        var i = 5

        //启动循环执行的定时器
        var timerInterval = setInterval(function () {
            console.log(i--);  //先输出，再减一  5 , 4 ,3, 2, 1 
            if (i == 0) { // i:5,4,3,2,1 , 0 
                clearInterval(timerInterval) //结束指定定时器
            }
            
        }, 1000)

下面展示一些 内联代码片。

在JavaScript中，关于定时器的实现，我们有2组方法：
（1）setTimeout()和clearTimeout()；
（2）setInterval()和clearInterval()；
一、setTimeout()和clearTimeout()
在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。
语法：
var 变量名 = window.setTimeout(code , time);
说明：
参数code可以是一段代码，也可以是一个调用的函数名；
参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。
举例：参数code是一段代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
    <script type="text/javascript">
       window.onload = function () {
           setTimeout("alert('欢迎来到javascript');", 2000);
       }
   </script>
</head>
<body>
   <p>2秒后提示欢迎语。</p>
</body>
</html>
二、setInterval()和clearInterval()
在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。
语法：
var 变量名 = setInterval (code , time);
说明：
参数code可以是一段代码，也可以是一个调用的函数名；
参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。
setTimeout()方法与setInterval()方法的语法很相似，实际上这两者在用法方面区别非常大。其中setTimeout()方法内的代码只会执行一次，
而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。
 
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <script type="text/javascript">
       //定义全局变量，用于记录秒数
        var n = 5;
       window.onload = function () {
           //设置定时器，重复执行函数countDown()
           var t = setInterval("countDown()", 1000);
       }
       //定义函数
       function countDown() {
           //判断n是否大于0，因为倒计时不可能有负数
           if (n > 0){
               n--;
               document.getElementById("num").innerHTML = n;
           }
       }
   </script>
</head>
<body>
   <p>新年倒计时：<span id="num">5</span></p>
</body>
</html>
 
setInterval()和clearInterval()
分析：
window.onload表示在页面加载完毕执行，在“JavaScript页面相关事件”我们会详细讲解到。
setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了，因为setTimeout()方法只会执行一次，而setInterval()会重复执行。

3.对话框

在这里插入图片描述

下面展示一些 内联代码片。

对于浏览器的对话框，我们都见过不少了。这一章我们给大家总结一下JavaScript对话框方面的知识。
 
在JavaScript中，对话框共有3种：
（1）alert();
（2）confirm();
（3）prompt()；
这3种方法都是属于window对象。其实alert()方法完整写法是“window.alert()”，但是由于window对象是全局对象，我们简写成“alert()”即可。confirm()和prompt()也是同样的道理。
 
其中，这3种对话框特点如下：
 
（1）alert()：仅有提示文字，没有返回值；
 
（2）confirm()：具有提示文字，返回“布尔值”（true或false）；
confirm()方法简介
在JavaScript中，confirm()方法对话框一般用于确认信息，它只有一个参数，返回值为true或false。
 
语法：
confirm(message)
说明：
 
message是必选项，表示弹出对话框中的文本，这是一个字符串。如果用户点击“确定”，则confirm()返回true。如果用户点击“取消”按钮，则confirm()返回false。confirm()方法往往都是和按钮结合使用。
 
（3）prompt()：具有提示文字，返回“字符串”；
 
prompt()方法简介
在JavaScript中，prompt()方法对话框用于输入并返回用户输入的字符串。
 
语法：
 
prompt(message);
说明：
 
参数message表示对话框中的提示内容，这是一个字符串。
 
举例：
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var name = prompt("请输入你的名字");
        document.write("欢迎<strong>" + name + "</strong>来到javacripte学习");
    </script>
</head>
<body>
</body>
</html>

4.获取浏览器窗口的尺寸
在这里插入图片描述
下面展示一些 内联代码片。


        console.log('window.innerHeight :',  window.innerHeight );
        console.log('window.innerWidth :',  window.innerWidth );

5.浏览器的onscroll事件
在这里插入图片描述

6.浏览器的滚动

a.scrollTop 获取的是页面向上滚动的距离
在这里插入图片描述

b.scrollLeft 获取页面向左滚动的距离
在这里插入图片描述
下面展示一些 内联代码片。

滚动示例


        //滚动事件-当滚动条滚动事触发
        window.onscroll = function(){
            // console.log('document.documentElement.scrollTop :  ', document.documentElement.scrollTop  ); //chrome 有 doctype
            // console.log('document.body.scrollTop  :', document.body.scrollTop  ); //  chrome  没doctype
            console.log('getScrollTop  :', getScrollTop()  ); //  chrome  没doctype
        }

        // 兼容性学习，获取滚动距离  0->  false  
        function getScrollTop(){
            if(document.documentElement.scrollTop){
                return document.documentElement.scrollTop
            }else{
                return document.body.scrollTop
            }

            // return document.body.scrollTop || document.documentElement.scrollTop
        }

三.历史记录对象（history）

在这里插入图片描述

在这里插入图片描述
示例：

四.位置对象（location）

1.常用属性：location.href
在这里插入图片描述

2.常用方法
在这里插入图片描述
3.属性.

五.屏幕对象（screen了解）

提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度，可用宽度、高度。
在这里插入图片描述

六.浏览器的版本信息（navigator了解）

序言：

window 中有一个对象叫做 navigator 是专门用来获取浏览器信息的

1.navigator.userAgent
在这里插入图片描述
2.navigator.appName

3.navigator.appVersion
在这里插入图片描述
4.navigator.platform

糖炒板栗哟~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Bom

一.什么是Bom1.关于bom的定义2.window对象包含的核心对象二.窗口对象window1.window的常用方法2.定时器定义：什么叫定时器？我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。setTimeout()和clearTimeout()；setInterval()和clearInterval()；a.在Java
复制链接

扫一扫