JavaScript学习笔记(五）(BOM)

最新推荐文章于 2024-07-21 10:17:51 发布

月色夜雨

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量80

点赞数

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_47267252/article/details/119479084

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript学习笔记(五）

BOM

浏览器对象模型（Browser Object Model）：因为浏览器的厂商不同，提供的BOM的的实现可能就不通，所以BOM存在兼容性问题。

BOM顶级对象:window对象

页面中所有的内容都数据浏览器的，页面中内容也是属于浏览器的（window）对象

一、系统对话框

//window.alert("警告窗口，可以省略window");
if(window.confirm("您确定要退出")){//选择是则返回true,反之false
    console.log("是的")
}else{
    console.log("不是的")
}
let content = window.prompt("您的姓名");
alert(content);//返回输入的内容以弹窗形式

存在阻塞作用,只有对弹出框做出响应后才会继续执行其他代码

二、页面加载事件

window.onload：当整个页面中的所有资源（DOM节点、图片资源、js文件、css文件等）加载完毕时候立即执行，等待的时间比较长

window.onunload：页面关闭后触发的事件

window.onload=function(){
    alert("加载加载完毕执行");
}
window.onunload=function(){
    console.log("页面关闭执行");
}
window.onbeforeunload=function(){
    alert("哈哈哈");
}

三、Location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <h1 id="my">西游记</h1>
    <button id="btn1">刷新页面1</button>
    <button id="btn2">刷新页面2</button>
    <hr/>
    <a href="javascript:;" id="a1">跳转页面百度</a><br/>
    <a href="javascript:;" id="a2">跳转页面163</a><br/>
    <a href="http://hao123.com" onclick="return false;">阻止默认行为</a><br/>
    <a href="javascript:;" id="a3">跳转页面126</a><br/>
    </body>

两种刷新页面的方式

 <script>
        window.onload=function(){
            let obj = document.getElementById("my");
            obj.innerHTML=Math.random();
            document.getElementById("btn1").onclick=function(){
                window.location.reload();//刷新当前页面
            }
            document.getElementById("btn2").onclick=function(){
                console.log(window.location.href,"当前的访问路径");
                window.location.href = window.location.href;//刷新当前页面
            }
            </script>

四.案列

定时器

在指定的一段时间内重复执行一次：setTimeout
在指定的一段时间内重复循环执行：setInterval

漫天星:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mydiv{
            width: 600px;
            height: 600px;
            border: 2px solid deepskyblue;
            position: relative;
        }
        span{
            font-size:30px;
            color: deeppink;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn1">星星</button>
<hr/>
<div id="mydiv"></div>


<script>
    window.onload=function(){

        document.getElementById("btn1").onclick=function(){
            let mydivObj = document.getElementById("mydiv");
            window.setInterval(function(){
                mydivObj.innerHTML="<span>★</span>";
                let x = Number.parseInt(Math.random()*600+1);
                let y = Number.parseInt(Math.random()*600+1);
                mydivObj.firstElementChild.style.left=x+"px";
                mydivObj.firstElementChild.style.top=y+"px";
            },50);
        }
    }

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

动态时间

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h3 id="time">动态时间</h3>
    <script>
        function getNow(){
              var d = new Date();
              var year= d.getFullYear();
              var month = d.getMonth()+1;
              var date = d.getDate();
              date = date<10?"0"+date:date;
              var hour = d.getHours();
              hour = hour<10?"O"+hour: hour;
              var min = d.getMinutes();min = min<10?"O"+min:min;var second = d.getSeconds();
              second = second<10?"O"+second : second;

              return year+"-"+month+"-"+date+" "+hour+ " : "+min+" : "+second;
        }
        window.onload = function (){
            document.getElementById("time").innerHTML = getNow();
            setInterval(function (){
                document.getElementById("time").innerHTML = getNow();
            },1000)
        }
    </script>
    </body> 
</html>

月色夜雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记(五）(BOM)

JavaScript学习笔记(五）BOM一、系统对话框二、页面加载事件三、Location对象四.案列定时器漫天星:动态时间BOM浏览器对象模型（Browser Object Model）：因为浏览器的厂商不同，提供的BOM的的实现可能就不通，所以BOM存在兼容性问题。BOM顶级对象:window对象页面中所有的内容都数据浏览器的，页面中内容也是属于浏览器的（window）对象一、系统对话框//window.alert("警告窗口，可以省略window");if(window.conf
复制链接

扫一扫