JavaScript基础：操作BOM对象（confirm、prompt、setInterval、clearInterval、setTimeout、clearTimeout、onload）

BestKagome
已于 2023-06-05 11:55:44 修改
阅读量141
点赞数
分类专栏： JavaScript 文章标签： javascript 前端
于 2022-07-08 14:06:14 首次发布
本文链接：https://blog.csdn.net/Alley_Olive/article/details/125677166
版权
JavaScript 专栏收录该内容
16 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础：操作BOM对象
        （alert、confirm、prompt、setInterval、clearInterval、setTimeout、clearTimeout、location、onload）
    </title>
    <!--
        BOM:
         1、BOM 即 Browser Object Model
         2、BOM用于操作浏览器行为
         3、操作BOM对象，一般使用 window 关键字 进行调用

        常用方法：

         1、alert()  
            弹出提示对话框。

         2、confirm()  
            弹出确认对话框，返回bool类型的值。点击“确定”按钮，返回true；点击“取消”按钮，返回false。

         3、prompt()
            弹出用户输入对话框，点击“确定”按钮，返回输入的内容（什么也不输入，返回空字符串）；点击“取消”按钮，返回null。

         4、setInterval(code/function, milliseconds)
            第一个参数：需要执行的代码，code/function。要调用一个代码串或者一个函数。
            第二个参数：执行代码的周期，milliseconds。周期性执行或调用code/function的时间间隔，以毫秒计算。
            提示： 1000 毫秒 = 1 秒。
                  1000 milliseconds = 1 second。
                  3000 milliseconds = 3 seconds。

            返回值：
                返回一个 计时器ID值（数字），可以将这个计时器ID值作为参数，
                传递给  clearInterval()  和  clearTimeout()  方法，以取消执行code/function。 

            总结：
                计时器方法可按照指定的周期（以毫秒计）来调用函数或者计算表达式，
                计时器方法会不停地调用函数，直到 clearInterval() 被调用或者窗口被关闭。


         5、setTimeout(code/function, milliseconds)
            第一个参数：需要执行的代码，code/function。要调用一个代码串或者一个函数。
            第二个参数：执行代码的周期，milliseconds。周期性执行或调用code/function的时间间隔，以毫秒计算。

            返回值：
                返回一个 计时器ID值（数字），可以将这个计时器ID值作为参数，
                传递给  clearInterval()  和  clearTimeout()  方法，以取消执行code/function。 

            总结：
                一次性计时器方法可按照指定的周期（以毫秒计）来调用函数或者计算表达式，
                一次性计时器方法只会调用一次函数，可以使用 clearTimeout() 清除一次性计时器。


         6、location
            浏览器地址栏对象。

            6.1、hash       返回一个url的锚部分
            6.2、host       返回一个url的主机名和端口
            6.3、hostname   返回url的主机名
            6.4、href       返回url的完整地址
            6.5、pathname   返回url的路径名
            6.6、port       返回一个url服务器使用的端口号
            6.7、protocol   返回一个url的协议
            6.8、search     返回一个url的查询部分


         7、onload
            页面加载完成后调用。

            语法：
            
            在 HTML 中:
                <body onload="SomeJavaScriptCode">

            在 JavaScript 中:
                window.onload = function(){ SomeJavaScriptCode };

    -->
    <style>
        .greenyellowButton{
            width: 240px;
            height: 50px;
            color:royalblue;
            font-size: 20px;
            margin: 10px;
            background-color: greenyellow;
            border: 2px solid orange;
            cursor: pointer;
        }
    </style>
    <script>
        // // confirm的使用：弹出确认对话框
        // var bConfirm = window.confirm("您确定要关掉天猫精灵吗？");
        
        // if(bConfirm){   
           
        //     window.close();
        // } 
        // else {
        //     window.alert("还可以和主人在一起，简直太开心啦！");
        // }


        // // prompt的使用：弹出用户输入对话框
        // var content = prompt("请输入您的班级信息！");
        // alert("用户输入了以下信息：" + content);


        // setInterval的使用，设置一定的时间间隔执行指定的代码串或函数
        // 
        // 功能实现一：
        // 每隔3秒打印一次数字
        var i = 0;
        var printNumberIntervalId = setInterval(function(){
            console.log(++i);
        }, 3000);

        // 取消打印数字，需要传入打印数字的计时器ID值
        function clearPrintNumberInterval(){
            clearInterval(printNumberIntervalId);
        }


        // 功能实现二：
        // 每隔10秒打印一次当前时间
        // 
        function printCurrentTime(){

            var currentDate = new Date();
            var currentDateStr1 = currentDate.toDateString();
            var currentDateStr2 = currentDate.toLocaleDateString();
            var currentDateStr3 = currentDate.toLocaleString();
            var currentDateStr4 = currentDate.toLocaleTimeString();

            console.log("调用toDateString方法，打印的时间是：" + currentDateStr1);
            console.log("调用toLocaleDateString方法，打印的时间是：" + currentDateStr2);
            console.log("调用toLocaleString方法，打印的时间是：" + currentDateStr3);
            console.log("调用toLocaleTimeString方法，打印的时间是：" + currentDateStr4);
        }


        // 方式一：
        // 第一个参数直接写函数名，一定不要加括号
        // var printTimeIntervalId = setInterval(printCurrentTime, 10000);


        // 方式二：
        // 第一个参数写个匿名函数，在里面调用写好的printCurrentTime方法（打印时间的方法）
        // 单独调用该方法需要加括号
        var printTimeIntervalId = setInterval(function() {
            printCurrentTime();
        }, 10000);
        

         // 取消打印时间，需要传入打印时间的计时器ID值
        function clearPrintTimeInterval(){
            clearInterval(printTimeIntervalId);  
        }


        // setTimeout的使用，设置一定的时间间隔执行指定的代码串或函数(达到延时执行效果)
        // 注意：函数仅仅执行一次，不会反复执行
        // 
        // 功能实现三：
        // 每隔5秒打印一次数字
        var j = 100;
        var printNumberTimeoutId = setTimeout(function(){
            console.log((j+5));
        }, 5000);

        // 取消打印数字，需要传入打印数字的间隔ID值
        function clearPrintNumberTimeout(){
            clearTimeout(printNumberTimeoutId);
        }


        // 浏览器地址栏（location）的使用
        function testURL(){

            console.log("location.hash为：" + location.hash);
            console.log("location.host为：" + location.host);
            console.log("location.hostname为：" + location.hostname);
            console.log("location.href为：" + location.href);
            console.log("location.pathname为：" + location.pathname);
            console.log("location.port为：" + location.port);
            console.log("location.protocol为：" + location.protocol);
            console.log("location.search为：" + location.search);
           
            // 跳转到指定网址
            // location.href = "https://www.runoob.com/";
        }

        console.log("在onload事件前，获得的button标签元素是：");
        console.log(document.getElementById("btn1"));

        // onload的使用，页面加载完成后调用。
        window.onload = function() {
           
            console.log("在onload事件中，获得的button标签元素是：");
            console.log(document.getElementById("btn1"));
        };
    </script>
</head>
<body>
    <input type="button" value="停止打印数字(Interval)" class="greenyellowButton" onclick="clearPrintNumberInterval()" id="btn1">
    <input type="button" value="停止打印时间(Interval)" class="greenyellowButton" onclick="clearPrintTimeInterval()">
    <input type="button" value="停止打印数字(Timeout)" class="greenyellowButton" onclick="clearPrintNumberTimeout()">
    <input type="button" value="测试url" class="greenyellowButton" onclick="testURL()">
</body>
</html>
页面效果：