BOM

最新推荐文章于 2025-07-04 11:33:13 发布

weixin_44740410

最新推荐文章于 2025-07-04 11:33:13 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44740410/article/details/88954209

BOM概念:

指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM的顶级对象:window是浏览器的顶级对象,页面的所欲内容都属于window

一个按钮绑定多个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<script src="comen.js"></script>
<script>
    my$("btn").onclick=f1;
    my$("btn").onmouseover=f1;
    my$("btn").onmouseout=f1;
    function f1(e) {
        if (e.type=="click"){
            alert("今天天气真好");
        } else if (e.type=="mouseover") {
            my$("btn").style.background="#f00";
        }else if (e.type=="mouseout") {
            my$("btn").style.background="#0f0";
        }
    }
    console.log(f1);
</script>
</body>
</html>

键盘抬起事件和联想词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 400px;
            height: 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div id="dv">
    <input type="text" id="txt">
    <input type="button" value="搜索" id="btn">
</div>
<script src="comen.js"></script>
<script>
    var keywords=["今儿天气真好","小明是个坏孩子","张国荣还有一个名字叫哥哥","张阿姨今天剪了一个刘海","小花是一个好孩子","张阿姨喜欢存傻屌图"];
    //在定义一个新数组,用于存检索数据
    //var newArr=[];
    //获取文本框的值
    my$("txt").onkeyup=function () {
        if (my$("dv1")) {
            my$("dv").removeChild(my$("dv1"));
        }
        var text=my$("txt").value;
        var newArr=[];

        for (var i=0;i<keywords.length;i++) {
            //var index=0;
            if( keywords[i].indexOf(text)==0){
               // newArr[0]=keywords[i];
                //index++;
                newArr.push(keywords[i]);
            }
        }
       // console.log(newArr);

        if (newArr.length==0||this.value.length==0) {
            return;
        }
        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++){
            var pObj=document.createElement("p");
            dvObj.appendChild(pObj);
            //setInnerText(pObj,newArr[i]);
           pObj.innerText=newArr[i];
           pObj.onmouseover=mouseoverHandle;
            pObj.onmouseout=mouseoutHandle;


        }
    }
function mouseover(e){

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

bom对象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.在页面中弹框,一般不用,调试的时候用
    alert("对话框");
    //2.确定框,确定和取消
    var flag=confirm("你是否确定注册?");
    console.log(flag);
//3.用户输入框,返回string
    var result=prompt("请输入你的名字");
    console.log(result);
</script>
</body>
</html>

加载事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            document.getElementById("btn").onclick=function () {
                alert("123456")
            }
        }
        //onunload:关闭页面时触发
        //onbeforeonload页面关闭前触发,IE特有
    </script>
</head>
<body>
<input type="button" value="显示内容" id="btn">
<script src="comen.js"></script>
</body>
</html>

location对象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //获取地址栏后面的#及以后内容
    console.log(window.location.hash);
    //获取主机名及端口号
    console.log(window.location.host);
    //主机名
    console.log(window.location.hostname);
    //获取文件的相对路径
    console.log(window.location.pathname);
    //端口号
    console.log(window.location.port);
    //协议
    console.log(window.location.protocol);
    //搜索的内容
    console.log(window.location.search);
</script>
</body>
</html>

定时器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="取消定时" id="btn">
<script src="comen.js"></script>
<script>
    //定时器
    //setInterval(参数1,参数2);
    //参数1:要重复执行的事情,是一个函数
    //参数2:时间,单位是毫秒,每个这个时间执行
    //执行过程:页面加载完毕后,过一秒,执行一次函数
    //清除定时:clearInterval(定时器的Id);

    var timeId=window.setInterval(function () {
        alert("hello");
    },1000)
    my$("btn").onclick=function () {
        window.clearInterval(timeId);
    }

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

窗口抖动:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div img{
            width: 200px;
            height: 200px;
        }
        div{
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" value="摇一摇" id="btn1">
<input type="button" value="停止" id="btn2">
<div id="dv">
    <img src="1.gif" alt="">
    <img src="1.gif" alt="">
</div>
<script src="comen.js"></script>
<script>
    var timeId="";//全局变量
    //点击按钮,使图片摇摆---隔一段时间换一个位置
    my$("btn1").onclick=function() {
        timeId = setInterval(function () {
            var x = parseInt(Math.random() * 100);
            var y = parseInt(Math.random() * 100);
            my$("dv").style.left=x+"px";
            my$("dv").style.top=y+"px";
        }, 100);
    }
    my$("btn2").onclick=function () {
        clearInterval(timeId);
    }

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

小星星一闪一闪亮晶晶:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 400px;
            height: 500px;
            background-color: black;
            position: relative;
        }
    </style>
</head>
<body>
<button id="btn">亮起来</button>
<div id="dv">

</div>
</body>
<script src="comen.js"></script>
<script>
    my$("btn").onclick=function () {
        setInterval(function () {
            my$("dv").innerHTML="<span>★</span>"
            var x = parseInt(Math.random() * 400);
            var y = parseInt(Math.random() * 500);
            my$("dv").firstElementChild.style.color="yellow";
            my$("dv").firstElementChild.style.position="absolute";
            my$("dv").firstElementChild.style.left=x+"px";
            my$("dv").firstElementChild.style.top=y+"px";
        },1);
    }
</script>
</html>

协议禁用按钮:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">呵呵哒哈哈哈呵呵哒哈哈哈呵呵哒哈哈哈</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled">
<script src="comen.js"></script>
<script>
    var time=5;
    setInterval(function () {
       my$("btn") .value="请仔细阅读协议("+--time+")";
        if(time<=0){
            my$("btn").disabled=false;
            my$("btn").value="同意";
        }
    },1000);

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

div透明化:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<button id="btn">透明化</button>
<script src="comen.js"></script>
<script>
    my$("btn").onclick=function () {
        var opacity=10;
      var timeId= setInterval(function () {
          opacity--;
            if (opacity==0){
                clearInterval(timeId)
            }
            my$("dv").style.opacity=opacity/10;
        },500);

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

设置div的宽:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<button id="btn">透明化</button>
<script src="comen.js"></script>
<script>
    my$("btn").onclick=function () {
        var opacity=10;
      var timeId= setInterval(function () {
          opacity--;
            if (opacity==0){
                clearInterval(timeId)
            }
            my$("dv").style.opacity=opacity/10;
        },500);

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

倒计时:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<button id="btn">透明化</button>
<script src="comen.js"></script>
<script>
    my$("btn").onclick=function () {
        var opacity=10;
      var timeId= setInterval(function () {
          opacity--;
            if (opacity==0){
                clearInterval(timeId)
            }
            my$("dv").style.opacity=opacity/10;
        },500);

    }
</script>
</body>
</html>0