js-BOM和js-DOM计时器

一.BOM

1.window
2.Location
3.History
4.navigator

 BOM：浏览器对象模型
            --window---整个浏览器窗口
            --navigator--代表当前浏览器的信息
            --Location--代表当前浏览器的地址，可获取地址栏
            --History--代表浏览器的历史记录
            --Screen--代表用户屏幕的信息，可获取显示器相关信息

window相关的方法属性

  window：方法：alert()---弹出框
                     confirm()---确定框--返回boolean类型
                     promp()---用户输入框--返回字符串String类型

history相关的方法属性

  history.back();----可回退上一页面
            history.forward();----可跳转下一页面
            history.go();----可跳转指定页面
                ----go('整数');----需要一个整数作为参数
                                ----1----向前跳转一个页面
                                ----2----向前跳转两个页面
                                ----'-1'----向后跳转一个页面
                                ----'-2'----向后跳转两个页面

location相关的方法属性

Location.href="www.baidu.com";-----跳转页面
Location.assign("www.baidu.com");-----仍然是跳转页面
Location.reload(true);----重新加载页面，与刷新类似
Location.replace();----替换当前页面，但并不能使用回退按钮

navigator相关的属性和方法

 navigator
            属性--appName---浏览器名称
                ----navigator.appName;
            属性--userAgent--是一个字符串，其中含有用来描述浏览器信息的内容
                ---navigator.userAgent

二.计时器

setInterval
setTimeout

  setInterval()---定时调用，可将一个函数 定时执行一次
            ----参数：setInterval(回调函数，时间(毫秒))
            ----var timer=setInterval(function(){
                    alert("123")
                },1000)
            ----存在一个返回值，返回一个Number类型的数据，此可以用来识别定时器
        清除定时器clearInterval(timer);

        setTimeout()----延时调用，可将一个函数延时执行，即并不立即执行，一段时间后执行，且只执行一次
        清除关闭延时调用clearTimeout(timer)

三.实例-----模拟百度搜索

*  思路：
    *  1.自己创建一个数组，用于假的检索
    *  2.键盘的抬起事件
    *     2.1 创建一个新的数组，用于存前面内容和用户输入的内容相同的数组元素
    *     2.2 在页面中创建div，用于存新数组中的所有的数据，再创建p标签显示在div中
    *     2.3  需要注意的点：①新数组的长度为0，或者文本框的值为空，那么就不需要执行2.2
    *                      ②每次触发抬起事件时，第一件事，把之前的div给删除掉，后面在创建。
    *
    * */
</script>
<script>
    //1. 定义一个数组，存数据
    var keywords = ["张国荣还有一个名字叫哥哥", "张梦亭是个好孩子", "张秋明今天剪了个刘海儿", "今天是纪念哥哥的日子", "今儿天儿真好", "小明是个坏孩子", "小明喜欢欺负其他孩子", "小微也是个好孩子"];


    //3. 当键盘抬起时，触发事件
    my$("txt").onkeyup = function () {
        //========================================================================
        // 如果一开始有div，那么删除，在创建
        if (my$("dv1")) {
            my$("dv").removeChild(my$("dv1"));
        }
        //3.1 获取文本框的值
        var text = my$("txt").value;
        //3.1.1 再定义一个新数组，用于存检索到的数据
        var newArr = [];

        //3.2判断文本框的值和数组元素的前面是不是相同，如果是的话，将这个数组元素存入新的数组
        for (var i = 0; i < keywords.length; i++) {
            //回想string对象的方法 indexOf("字符串")==字符串所在的位置，如果不存在返回-1
            // var index = 0;
            if (keywords[i].indexOf(text) == 0) {//判断是否是最开始的
                // newArr[index] = keywords[i];
                // index++;
                newArr.push(keywords[i]);//向数组后追加元素
            }
        }
        // console.log(newArr);======新数组里面已经添加数据
        //===================================================================================
        //如果新数组没有数据，那么就不用创建div
        //如果文本框没有输入内容，那么也不用创建div
        if (newArr.length == 0 || this.value.length == 0) {
            return;
        }

        //3.3 把新数组的内容，创建新的元素，显示在页面中
        //3.3.1 创建一个div，用于存检索的数据
        var dvObj = document.createElement("div");
        my$("dv").appendChild(dvObj);
        dvObj.width = "300";
        // dvObj.height = "200";//===不写也行
        dvObj.style.border = "1px solid red";
        dvObj.id = "dv1";

        for (var i = 0; i < newArr.length; i++) {
            //在div中追加p标签，显示检索的内容
            var pObj = document.createElement("p");
            dvObj.appendChild(pObj);
            setInnerText(pObj, newArr[i]);

            pObj.mouseoverHandle;
            pObj.mouseoutHandle;
            pObj.clickHandle;
        }
    }
    //鼠标移入事件
    function mouseoverHandle(){
        this.style.background="yellow";
    }
    //鼠标移入事件
    function mouseoutHandle(){
        this.style.background="";
    }
    function clickHandle(){
        my$("txt").value=this.innerText;
        my$("dv").removeChild(my$("dv1"));
    }