JavaScript的组成--BOM浏览器对象模型

最新推荐文章于 2022-11-17 12:01:32 发布

夏虫语冰彡

最新推荐文章于 2022-11-17 12:01:32 发布

阅读量353

点赞数 1

文章标签： javascript BOM浏览器对象模型 js的组成定时器函数 history对象

本文链接：https://blog.csdn.net/qq_34283987/article/details/77937564

版权

JavaScript的组成

95年2月布兰登艾奇(Brendan Eich)着手为1995年2月发布的Netscape navigator2开发一门新语言:JavaScript,后来微软也在其IE3中加入名为JScript的JavaScript实现(命名为Jscript是为了避开与Netscape有关的授权问题)
JavaScript的组成：
1.ECMAScript 欧洲计算机制造商协会制定的规范
2.BOM,Browser Object Model浏览器对象模型
3.DOM,Document Object Model文档对象模型

BOM, Browser Object Model浏览器对象模型

6+1种，兼容性差，但是有的内容是很重要的。

一、window对象

两个定时器函数（重点）
1.window.setTimeout(函数名，毫秒)；延迟多少毫秒后，执行该函数，只执行一次

示例代码：3秒后跳转

<script type="text/javascript">
            function test () {
                window.setTimeout(tiaozhuan,3000);
            }

            function tiaozhuan () {
                location.assign("http://www.sohu.com");
            }
        </script>
<input type="button" name="btn1" id="btn1" value="3秒跳转" onclick="test();"/>

2.window.setInterval(函数名，毫秒)；每隔多少毫秒执行一次
清除定时器：window.clearInterval(定时器名字)
示例代码1：显示时钟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第二个定时器对象</title>
        <script type="text/javascript">
            var div1;
            var currentTime;
            var myInterval;
            function test () {
                myInterval = window.setInterval(displayTime,1000);
                div1 = document.getElementById("div1");
            }

            function displayTime () {
                //只获得当前时间
                currentTime = new Date().toLocaleTimeString();
                div1.innerHTML = currentTime;
            }

            function stopTime () {
                window.clearInterval(myInterval);
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="显示时间" onclick="test();"/>
        <input type="button" name="btn2" id="btn2" value="停止显示时间" onclick="stopTime();"/>
        <div id="div1">

        </div>
    </body>
</html>

示例代码2：倒计时5秒跳转到百度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>倒计时5秒跳到百度</title>
        <script type="text/javascript">
            var div1; 
            var t = 5;
            function goto(){
                window.setInterval(gotobaidu,1000);
            }

            function gotobaidu () {
                div1 = document.getElementById("div1");
                div1.innerHTML = t--;
                if(t==0){
                    location.assign("http://www.baidu.com");
                }
            }

        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="5秒后跳转至百度" onclick="goto();"/>
        <div id="div1">

        </div>
    </body>
</html>

注：可以通过修改图片的src,做到轮播即切换图片的效果

二、 history对象

历史对象，代表浏览器的历史栏，可以实现后退一步或前进一步，如：购物时的添加至购物车后，查看购物车的继续购物按钮，即是后退一步的操作。
基本语法：history.back();后退一步，
history.forward();前进一步
或者
history.go(-1);//后退一步
history.go(2);//前进两步
还可以通过history.length属性返回用户访问的页面总数。

示例代码：

a.html
<h2>a.html</h2>
        <a href="b.html">跳到b.html</a>
        <input type="button" name="btn1" id="btn1" value="前进一步" onclick="history.forward()"/>
        <input type="button" name="btn2" id="btn2" value="后退一步" onclick="history.back()"/>

b.html
<h2>b.html</h2>
        <a href="c.html">跳到c.html</a>
        <input type="button" name="btn1" id="btn1" value="前进一步" onclick="history.forward()"/>
        <input type="button" name="btn2" id="btn2" value="后退一步" onclick="history.back()"/>
        <input type="button" name="btn1" id="btn1" value="使用go前进一步" onclick="history.go(1)"/>
        <input type="button" name="btn2" id="btn2" value="使用go后退一步" onclick="history.go(-1)"/>

c.html
<h2>c.html</h2>
        <input type="button" name="btn2" id="btn2" value="后退一步" onclick="history.back()"/>
        <input type="button" name="btn3" id="btn3" value="访问页面数" onclick="alert(history.length)" />

这里写图片描述

夏虫语冰彡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的组成--BOM浏览器对象模型

JavaScript的组成95年2月布兰登艾奇(Brendan Eich)着手为1995年2月发布的Netscape navigator2开发一门新语言:JavaScript,后来微软也在其IE3中加入名为JScript的JavaScript实现(命名为Jscript是为了避开与Netscape有关的授权问题) JavaScript的组成： 1.ECMAScript 欧洲计算机制造商协会制定
复制链接

扫一扫