10.JavaScript外部对象-BOM

来源：互联网发布：知乎汉景帝杀吴太子编辑：程序博客网时间：2024/06/05 19:57

外部对象概述

BOM:

Browser Object Model:浏览器对象模型，用来访问和操作浏览器窗口

通过使用BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作

没有相关标准，但被广泛支持

DOM：

Document Object Model：文档对象模型，用来操作文档

定义了访问和操作HTML文档的标准方法

应用程序通过DOM树的操作，来实现对HTML文档数据的操作

widow对象：

window表示浏览器窗口，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

常用方法：

alert()、confirm()

setTimeout(),clearTimeout()

setInterval(),clearInterval()

对话框：

alert(str):提示对话框，显示str字符串的内容
confirm(str):确认对话框，显示str字符串的内

按“确定”按钮返回true，其他操作返回false

<script>    function f1() {        var b = confirm(“Are you sure?”);        alert(b);    }</script><body>    <input type=”button” value=”delete” onclick=”f1();”/></body>

定时器：

多用于网页动态时钟、制作倒计时、跑马灯效果等

周期性时钟：以一定的间隔执行代码，循环往复
一次性：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

周期性定时器

setInterval(exp, time)：周期性触发代码exp

exp：执行语句

time：时间周期，单位为毫秒

返回已经启动的定时器对象

clearInterval(tID)：停止启动的定时器

tID：启动的定时器对象

一次性定时器

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

case1:countdown

功能实现：点击countdown按钮，5s后弹出对话框"boom"

<script>    function countdown() {        //启动周期性定时器 ，每1000ms调用一次        //返回值是定时器的id，用来停止计时器        var n = 5;        var id = setInterval(function(){            console.log(n--);            if(n==0) {          //if(!n)                clearInterval(id);                alert(“boom”);            }        }, 1000);        //当前countdown方法相当于主线程，启动定时器相当于启动支线程        //主线程不等待支线程，启动完成后立刻执行下一行，即启动”countdown”        //支线程在等待1s后才第一次运行        console.log(“countdown”);    }</script><body>    <input type=”button” value=”countdown” onclick=”countdown();”></body>

case2:alarm clock

功能实现：点击set按钮，设置闹钟，5s内未点击cancel alarm按钮，则对话框显示“Ding Ding Ding”，否则不显示

————有缺陷，按两次set ，再按cancel，定时器未停止，因为id被覆盖

————解决方案见case3

<script>    var id;    function alarm() {        //启动一次性定时器        //5000ms后调用函数，并且调用一次后停止定时器        id = setTimeout(function(){            alert(“Ding Ding Ding”);        }, 5000);    }    function cancel_alarm() {        clearTimeout(id);    }</script><body>    <input type=”button” value=”set alarm” onclick=”alarm();”/>    <input type=”button” value=”cancel alarm” onclick=”cancel_alarm();”></body>

case3：clock

功能实现：点击start按钮，文本框内显示当前时间，点击stop按钮，时间停止，再次点击start，文本框内时间继续按系统时间显示

<script>    var id;    function start_clock() {        if(id){         //id非空，表示定时器已启动，不必再次启动        return;    }    //id为空，表示未启动，则启动定时器    id = setInterval(function(){        var d = new Date();        var p = document.getElementById(“clock”);        p.innerHTML = d.toLocaleTimeString();        }, 1000);    }    function stop_clock() {        clearInterval(id);        id = null;          //stop 后为空，能再次start    }</script><style>    #clock { width/height... }    .b { border/width/height }</style><body>    <input type=”button” value=”start” onclick=”start_clock();” class=”b”/>    <input type=”button” value=”stop” onclick=”stop_clock();” class=”b”/>    <p id=”clock”></p></body>

case4:send/cancel message

功能实现：点击send按钮，发送，超过3s发送，并显示send successfully；3s内点击cancel，取消发送，显示cancel

<style>    #msg { width/height/... }    .b { width/height/... }</style><script>    var id;    function sendmsg() {        if(id) { return; }        //显示正在发送        var p = document.getElemetById(“msg”);        p.innerHTML = “sending”;        //延时3s，真正发送        id = setTimeout(function() {            p.innerHTML = “send successfully”;            id = null;        }, 3000);    }    function cancelmsg() {        if(id) {            var p = document.getElementById(“msg”);            clearTimeout(id);            p.innerHTML = “cancel”;            id = null;          //cancel 后id为空，能再次send        }    }</script><body>    <p>        <input type=”button” value=”send” onclick=”sendmsg();” class=”b”>        <input type=”button” valur=”cancel” onclick=”cancekmsg();” class=”b”>    </p>    <p id=”msg”></p></body>

常用属性：

document：窗口中显示HTML文档对象
history：浏览过窗口的历史记录对象
length属性：浏览器历史列表中的URL数量
alert(history.length)
方法：
- back() history.back() —–> 等同于单击"后退"按钮
- forward() history.forward() —–> 等同于单击"前进"按钮
- go(num) history.go(-2) —–> 等同于单击两次"后退"按钮
location：窗口文件地址对象，抱包含当前URL的信息
常用于获取和改变当前浏览的网址
href属性：当前窗口正在浏览的网页地址
方法：
- reload() 重新载入当前网址，同按下刷新键
screen：当前屏幕对象
常用于获取屏幕的分辨率和色彩
常用属性：width/height/ availWidth/availHeight可用宽高
常用来区分PC和phone
navigator：浏览器相关信息
常用于获取客户端浏览器和操作系统信息
navigator.userAgent;

case：

<script>    function f1(){        var b = confirm(“leave”);        if(b) { location.href = ”www.albertliangzt.com”; }    }    function f2() { location.reload(); }    function f3() { history.forward(); }</script><body>    <input type=”button” value=”index” onclick=”f1();”>    <input type=”button” value=”reload” onclick=”f2();”>    <input type=”button” value=”forward” onclick=”f3();”></body>

阅读全文

0 0