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

小代码演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //1.确认框
    function del() {
        var b = confirm("确定要删除此数据吗?");
        console.log(b);
    }
    //2.周期性定时器
    function f1() {
        //启动周期性定时器:
        //告诉浏览器每隔1000ms调用一次函数.
        //返回值是定时器的ID,用来停止定时器.
        var n = 5;
        var id = setInterval(function(){
            console.log(n--);
            if(!n) {
                //停止定时器
                clearInterval(id);
                console.log("DUANG");
            }
        },1000);
        //当前方法f1相当于主线程,
        //启动定时器相当于启动支线程,
        //主线程不等待支线程,启动完成后,
        //立刻执行下一行,即输出了BOOM.
        //支线程在等待1S后才第一次运行.
        console.log("BOOM");
    }
    //3.一次性定时器
    var id;
    function f2() {
        //启动一次性定时器:
        //让浏览器在5000ms后调用函数,
        //并且调用一次后就自动停止定时器.
        id = setTimeout(function(){
            console.log("叮叮叮叮叮叮");
        },5000);
    }
    function f3() {
        clearTimeout(id);
    }
</script>
</head>
<body>
    <input type="button" value="删除"
        onclick="del();"/>
    <input type="button" value="倒计时"
        onclick="f1();"/>
    <input type="button" value="订闹钟"
        onclick="f2();"/>
    <input type="button" value="取消"
        onclick="f3();"/>
</body>
</html>

电子时钟显示小案例：setInterval

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    #clock {
        border: 1px solid red;
        width: 200px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
    }
</style>
<script>
    //开始
    var id;
    function start1() {
        if(id) {
            //id非空,表示定时器已启动,不必再次启动了
            return;
        }
        //id为空,表示未启动,则启动定时器
        id = setInterval(function(){
            var d = new Date();
            var p = document.getElementById("clock");
            p.innerHTML = d.toLocaleTimeString();
        },1000);
    }
    //停止
    function stop1() {
        clearInterval(id);
        //停止时清空id,以便于下一次启动
        id = null;
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="开始"
            onclick="start1();"/>
        <input type="button" value="停止"
            onclick="stop1();"/>
    </p>
    <p id="clock"></p>
</body>
</html>

Oclock.html

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

小代码演示：

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