JavaScript BOM对象及定时器的操作

什么是BOM对象？

        BOM对象又称浏览器对象模型，它是JavaScript的组成部分之一，BOM赋予了JavaScript程序与浏览器交互的能力。window对象是BOM的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。

        总的来说，BOM对象大致包含五个部分:

• Window对象:浏览器窗口对象
• Navigator:浏览器对象
• Screen:浏览器所处客户端的显示器屏幕对象
• History:浏览器当前窗口的访问历史记录对象
• Location:浏览器当前窗口的地址栏对象

        每个对象都有对应的属性和方法，通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中，Window对象尤为重要，根据图片的区域划分，可以很清楚的看出，Window对象其中就包含了History、Location对象，还有一个非常重要的Document对象，但由于其重要性太高，所以前面课程我们将其单独区分出来，成为DOM对象，

        而另外两个:Navigator、Screen对象，使用到的次数较少。

confirm:确认框，当点击确认时，返回true。

案例举例:

html样式代码：

 建立JavaScript代码:

 var add = document.querySelector('#add');
        add.onclick = function(){
            if(confirm('您确定要添加吗？')){
                // 创建节点吧
                var li = document.createElement('li');
                //获取文本框输入值
                var content = document.querySelector('#content');
                li.innerHTML = content.value;
                //获取ul标签
                var ul = document.getElementById('lists');
                // 将li按教导ul中
                ul.appendChild(li);
                alert('添加成功');
            }            
        }      
            // 声明一个新的window用来存储
            var winddowNew;
            openNew.onclick = function(){
                // open():可以打开一个新的页面，返回window对象
                newWindow = window.open("https://www.baidu.com");
            }
            closeNew.onclick = function(){
                // close():关闭打开的窗口
                clearInterval;
            }
        // 规范输入框中的输入规范
        var content=document.querySelector("#content");
        content.onchenage=function(){
            var reg = /[\u4e00-\u9fa5]/
            var str = this.value;
        }

        在输入框中输入内容，点击添加节点，弹出一个框，确定为true，取消为false；点击新窗口弹出一个百度页面。

         Location中的一些 assign():可以打开新的页面，并且可以返回，可以产生历史记录
        reload()实现页面刷新
        replace()用新的文档替换当前的文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录

        href

 assig.onclick = function(){
                 location.assign("https://www.baidu.com");
             }

reload.onclick = function(){
                 location.reload();
             }

replace.onclick = function(){
                 location.replace("https://www.baidu.com");
             }

href.onclick = function(){
                // location.href = "https://www.baidu.com";
                console.log(location.host);
             }

Js定时器:

        js定时器有以下两个方法:

• setinterval():按照指定的周期(以毫秒记)来调用函数或计算表达式。方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。         
• setTimeout():在指定的毫秒数后调用函数或计算表达式。     

         setinterval()语法:

        setInterval(code,millisec,lang)；

        setTimeout() 语法:

        setTimeout(code,millisec,lang);

 通过案例进行总计:

定时轮播图小案例:

html样式:

 js代码块:

 var index = 1;
        function change() {
            var arr = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg'];
            // 获取图片
            var img = document.querySelector('#lunb img');
            img.src = "./img/" + arr[index];

            
            //轮播图下标点li;
            // 首先获取li
            var list = document.querySelectorAll('ul li');
            for (var i = 0; i < list.length; i++) {
                list[i].classList.remove('bgc');
            }
            list[index].classList.add('bgc');
            index++;
            if (index > 4) {
                index = 0;
            }
        }
        // 每隔一秒切换一张图片
        setInterval(change, 1000);

效果图，一秒一换