WEBBASIC Unit06 外部对象概述、 window 对象、 document 对象

来源：互联网发布：mac 全角空格编辑：程序博客网时间：2024/06/05 19:27

一.外部对象概述

外部对象本质上就是浏览器的API.
外部对象包括BOM和DOM,它们是包含关系.

这里写图片描述

二.动态时钟

这里写图片描述

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>    p {        width: 200px;        height: 30px;        line-height: 30px;        font-size: 20px;        text-align: center;        border: 1px solid red;    }</style><script>    var id;    function start() {        //若ID非空则定时器已启动,        //此时就不要重复启动了.        if(id) {            return;        }        id = setInterval(function(){            //获得当前时间            var date = new Date();            //转换为本地格式            var now = date.toLocaleTimeString();            //将时间写入p            var p = document.getElementById("clock");            p.innerHTML = now;        },1000);    }    function stop() {        clearInterval(id);        //停止定时器时清空ID,        //以保证下次可以启动定时器.        id = null;    }</script></head><body>    <input type="button" value="开始"        onclick="start();"/>    <input type="button" value="停止"        onclick="stop();"/>    <p id="clock"></p></body></html>

三.发送消息

这里写图片描述

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>    p {        width: 200px;        height: 30px;        line-height: 30px;        text-align: center;        border: 1px solid red;    }</style><script>    var id;    function send() {        //若ID非空则定时器已启动,        //此时不要重复启动定时器.        if(id) {            return;        }        //显示正在发送        var p = document.getElementById("msg");        p.innerHTML = "正在发送...";        //推迟3秒,显示已发送        id = setTimeout(function(){            p.innerHTML = "已发送";            //定时器执行完成后会自动停止            id = null;        },3000);    }    function cancel() {        //若ID非空则定时器已启动,        //此时才允许撤消.        if(id) {            var p = document.getElementById("msg");            p.innerHTML = "已撤消";            clearTimeout(id);            id = null;        }    }</script></head><body>    <input type="button" value="发送"        onclick="send();"/>    <input type="button" value="撤消"        onclick="cancel();"/>    <p id="msg"></p></body></html>

四.DOM概述

这里写图片描述

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>    //onload是页面加载事件,在网页加载完成时,    //自动触发,触发时调用对应的函数.    window.onload = function(){        //读写节点        //1.读取节点的名称和类型        var p1 = document.getElementById("p1");        console.log(p1.nodeName);        console.log(p1.nodeType);        //2.读写节点的内容        //<p>内容</p>,<span>内容</span>        //任何双标签中间的文本就是内容        //1)innerHTML(带标签)        var p2 = document.getElementById("p2");        console.log(p2.innerHTML);        p2.innerHTML = "2.DOM提供了<u>查询</u>节点的方法";        //2)innerText(不带标签)        var p3 = document.getElementById("p3");        console.log(p3.innerText);        p3.innerText = "3.DOM提供了<u>增删</u>节点的方法";    }</script></head><body>    <p id="p1">1.DOM提供了<b>读写</b>节点的方法</p>    <p id="p2">2.DOM提供了<b>查询</b>节点的方法</p>    <p id="p3">3.DOM提供了<b>增删</b>节点的方法</p></body></html>

案例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>    //confirm()    function f1() {        var b = confirm("您确定要清空购物车吗?");        if(b) {            console.log("购物车已清空");        }    }    //周期性定时器    function f2() {        //启动周期性定时器:        //每隔1000ms调用一次函数.        //返回的ID是定时器的唯一标识,        //用来停止定时器.        var n = 5;        var id = setInterval(function(){            console.log(n--);            if(n==0) {                clearInterval(id);                console.log("DUANG!");            }        },1000);        //当前方法f2相当于主线程,        //setInterval相当于启动了支线程,        //二者并发执行,不互相等待.        //主线程在启动支线程后立刻向下执行,        //支线程需要等待1秒后才执行第一次.        console.log("BOOM!");    }    //一次性定时器    var id;    function f3() {        console.log("显示广告");        //启动一次性定时器:        //推迟5000ms调用函数,        //调用一次后自动结束.        id = setTimeout(function(){            console.log("自动关闭广告");        },5000);    }    function f4() {        //在定时器没有自动停止前,        //可以调用此方法提前停止.        clearTimeout(id);    }</script></head><body>    <input type="button" value="清空"        onclick="f1();"/>    <input type="button" value="倒计时"        onclick="f2();"/>    <input type="button" value="广告"        onclick="f3();"/>    <input type="button" value="看广告"        onclick="f4();"/></body></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>    //location    function f1() {        var b = confirm("您确定要离开本页吗?");        if(b) {            location.href = "http://www.tmooc.cn";        }    }    function f2() {        location.reload();    }    //history    function f3() {        history.forward();    }    //screen    console.log(screen.width);    console.log(screen.height);    //navigator    console.log(navigator.userAgent);</script></head><body>    <input type="button" value="达内"        onclick="f1();"/>    <input type="button" value="刷新"        onclick="f2();"/>    <input type="button" value="前进"        onclick="f3();"/></body></html>

阅读全文

0 0

WEBBASIC Unit06 外部对象概述 、 window 对象 、 document 对象

一.外部对象概述

二.动态时钟

三.发送消息

四.DOM概述

案例：

WEBBASIC Unit06 外部对象概述、 window 对象、 document 对象