JavaScript BOM

1、BOM简介

DOM:document  object  model
            
            DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素
            
            BOM: Brower   object  model  
            浏览器器对象模型.可以获取一些浏览器自带的功能
            
             由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，
             BOM的浏览器兼容性较差。常见的BOM对象有：
                window  
                document
                 location

2、window对象讲解

<button id="btn">点击我跳转到另外一个页面</button>
        <a href="1_BOM简介.html">点击我跳转到另外一个页面</a>
        <button id="close">退出网页</button>
        <script>
            //window对象是全局对象又称顶级对象.可以省略不写
            //常见的方法:console.log()   alert
            // console可以写成window.console。
            
            // alert()可以写成window.alert()。
            
            // prompt()可以写成window.prompt()。
            
            // open()可以写成window. open()。
            
            // close()可以写成window.close()。

            //open表示开启一个新窗口  重新开启一个窗口  而a标签是在当前窗口完成覆盖.
            document.getElementById("btn").onclick = function(){
                // window.open("1_BOM简介.html");
                open("1_BOM简介.html");
            }
            
            
            //close方法 表示直接关闭浏览器
            document.getElementById("close").onclick = function(){
                // window.open("1_BOM简介.html");
                close();
            }

3、location对象

<button id="btn">点击我跳转页面</button>   <br>
        <button id="btn1">点击我获取当前页面的网址</button>  <br>
        <button id="btn2">点击我刷新网页</button>
        
        <script>
            //location对象常用于路径相关的用法
            
            //常见用法1: 跳转到指定页面  等同于A标签的功能
            document.getElementById("btn").onclick = function(){
                location.href = "1_BOM简介.html";
            }
            
            //常见用法2: 获取当前页面的URL地址
            document.getElementById("btn1").onclick = function(){
                console.log(location.href);
            }
            
            
            
            
            //客串知识点: 编码和乱码的区别:
            //乱码值得是 两个字符串 采用的编码不一致,导致数据乱套.
            //数据呈现出 无法阅读的字样 .
            
            
            
            //编码:将占据空间较大的汉字 转成占据空间较小的字母  的编码形式
            //解码:将字母 又转回汉字.
            
            //如何对字符串进行编码解码的操作
            var str = "%E5%AF%B9%E8%B1%A1";
            str = decodeURI(str);//进行解码
            console.log(str);
            
            var str = "对象";
            str = encodeURI(str);//进行编码
            console.log(str);
            
            //常见用法3: 刷新当前网页
            document.getElementById("btn2").onclick = function(){
                location.reload();
            }

4、定时器的基本用法

//定时器: 每间隔多少时间毫秒 自动执行函数    的一种机制.
            
            //例如5秒后退出系统   例如轮播图 每隔1秒进行图片的转变
            
            //定时器的种类: 分为 延时定时器  和   重复定时器
            
            //延时定时器:  等待多少时间 执行一次函数  就GG
            
            //重复定时器: 每隔多少时间  都执行一次函数 无限循环  除非代码写了关闭的条件

5、演示定时器的基本用法

// 等待多少时间 执行一次函数  就GG
            //延时定时器的语法如下:
            /*
                1. setTimeout(function(){ 代码块 },  xx);  xx毫秒    
                
                2. setTimeout(aa,  xx);       注意aa表示函数名 不要加括号
                
                    function aa(){
                        
                    }
                    
            */
           
           
           
           // setTimeout(function(){
              // console.log("你好~~~"); 
           // },2000)
           
           
           // function aa(){
              //  console.log("你好~~");
           // }
           
           
           // setTimeout(aa,3000);
           
           
           setTimeout(function(){
                close();
           },5000)
           
           6、重复定时器

//重复定时器: 每隔多少时间  都执行一次函数 
            //无限循环  除非代码写了关闭的条件
            //重复定时器的语法如下:
            /*
                1. setInterval(function(){ 代码块 },  xx);  xx毫秒    
                
                2. setInterval(aa,  xx);       注意aa表示函数名 不要加括号
                
                    function aa(){
                        
                    }
                    
            */
           
           // setInterval(function(){
              //  console.log("~~");
           // },1000);
           
           // setInterval(aa,1000);
           
           // function aa(){
              //  console.log("~~~");
           // }
           
           
           
           //如何关闭定时器
           //1.需要先定义定时器的名字
           //2.加上关闭的条件
           //3.通过clearInterval(xxx);  xxx表示定时器的名字
           
           var dsq ; //假设该变量是存储定时器
           
           
            dsq = setInterval(function(){
                console.log("~~");
            },1000);
            
            
            document.getElementById("btn").onclick = function(){
                clearInterval(dsq);
            }
            7、在页面显示当前时间

当前时间为：  <span id="sj"></span>
        
        <script>
            //需求在网页上刷新时间
            var sj = document.getElementById("sj");
            
            
            //立刻马上 时时刻刻刷新时间  
            // setInterval(function(){
            //     var date = new Date();
            //     sj.innerText = date.toLocaleString();
            // },0);
            
            
            //先赋予一个初值
            var date = new Date();
            sj.innerText = date.toLocaleString();
            //每秒刷新.
            setInterval(function(){
                var date = new Date();
                sj.innerText = date.toLocaleString();
            },1000);
            

案例：

8、距离新年倒计时

距离2024年还差：
        <span id="d"></span>天
        <span id="h"></span>时
        <span id="m"></span>分
        <span id="s"></span>秒
        <script>
            //需求在网页上刷新倒计时的时间
            var d = document.getElementById("d");
            var h = document.getElementById("h");
            var m = document.getElementById("m");
            var s = document.getElementById("s");
            
            
            
            
            setInterval(function(){
                //倒计时的本质:两个时间节点的时间差 计算出两者相差的时间
                var d1 = new Date();//当前时间
                var d2 = new Date(2024,0,1);//未来时间
                
                var sjc = d2.getTime() - d1.getTime();  //两个时间节点的时间差
                
                //此时的jsc是一个毫秒数. 先转成秒
                sjc = Math.ceil(sjc / 1000);//秒数
                
                s.innerText = sjc%60;  //秒
                
                m.innerText = Math.floor(sjc/60%60);//分
                
                h.innerText = Math.floor(sjc/60/60%24);//时
                
                d.innerText = Math.floor(sjc/60/60/24);//天
                
                
            },0);
            

9、点名系统

<button id="btn">开始点名</button>
        
        <script>
            var student = ["张三1","张三2","张三3","张三4","张三5","张三6","张三7"];
            
            
            var btn = document.getElementById("btn");
            var p = document.getElementsByTagName("p")[0];
            var dsq ; 
            
            
            btn.onclick = function(){
                
                if(btn.innerText == "开始点名"){
                    //点击开始了
                    btn.innerText = "停止点名";
                    dsq = setInterval(function(){
                        var sjs =Math.floor(Math.random() * student.length);  // 
                         p.innerText = student[sjs];
                    },10);
                }else{
                    btn.innerText = "开始点名";
                    clearInterval(dsq);
                }
                
            }