WEBBASIC Unit06 外部对象概述、 window 对象、 document 对象_倒计时结束或者提前离开页面停止定时器-优快云博客

本文介绍了前端开发中常用的技巧和实践案例，包括使用JavaScript进行定时操作、DOM操作、页面导航控制等，通过具体实例展示了如何实现动态时钟、消息发送等功能。

一.外部对象概述

外部对象本质上就是浏览器的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>