BOM & DOM - 爱码网

上篇回顾

javascript的简单定义及了解

引入方式及存在方式

定义变量的方式及需要注意的地方

常量以及标识符

运算符之间的一些比较

控制语句有哪些

基本数据类型及其方法

函数的简单介绍及使用

BOM

1、了解

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

使 JavaScript 有能力与浏览器“对话”。从而提供与浏览器交互的方法和接口

2、window对象

//window对象

    所有浏览器都支持 window 对象 表示浏览器窗口

    概念上讲.一个html文档对应一个window对象.

    功能上讲: 控制浏览器窗口的.

    使用上讲: window对象不需要创建对象,直接使用即可.

3、window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。   // 其方法有返回值,结果为布尔值 可以进行一系列的判断

prompt()           显示可提示用户输入的对话框。                    // 其方法有返回值,输入有内容，即返回内容;点取消则返回null
 
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

// 实例
// 在输入框,实现点击显示当前时间,并有stop按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #show{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <input type="text" >  <!--绑定点击事件并触发begin函数-->
    <button onclick="end()">Stop</button>            <!--绑定点击事件并触发end函数-->

    <script>
        function showtime() {
            var date_time = new Date().toLocaleString();    // 获取当前事件
            var content = document.getElementById("show");  // 找到id为。。的标签
            content.value = date_time;                      // 对标签的value进行赋值
        }

        var clock;   // 声明变量
        function begin() {
            // 变量未被定义则为undefined
            if (clock==undefined){
                showtime();  // 执行函数
                clock = setInterval(showtime,1000);  // 多次计时 单位毫秒
            }
        }

        function end() {
            clearInterval(clock);  // 清空多次定时器
            clock=undefined;       // 重新赋值
            }
    </script>
</body>
</html>

setInterval clearInterval之多次定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="f1()">点我</button>
    <button onclick="f2()">停止</button>


    <script>
        var my_var;
        function f1() {
            my_var = setTimeout(function () {alert("Hello World")},3000);
            // 等待三秒  弹出框Hello World
        }

        function f2() {
            clearTimeout(my_var);
            // 清除单次计时器
            // 且必须在3000毫秒之前点击 否则无效
        }

    </script>
</body>
</html>

setTimeout clearTimeout之单次定时器