javascript中的BOM

本文转载自查看原文 2019-03-28 17:25 516 js

一·什么是BOM

BOM（Browser Object Model）即浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象;由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性.

二·window对象的方法

　　·弹出一个警告框（alert（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    window.alert('这是一个警告框')
}
</script>
</body>
</html>

View Code

　　·弹出一个确认框（confirm（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()" id="id2">点我</button>
<script>
    //点击按钮，提示你按了什么按钮
function myFunction(){
    var x;
    var r=confirm("你是猪？");
    if (r==true){
        x="你按下了\"确定\"按钮!";
    }
    else{
        x="你按下了\"取消\"按钮!";
    }
    document.getElementById("id1").innerHTML=x;
}
</script>
</body>
</html>

View Code

　　·弹出一个提示框（prompt（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()" id="id2">点我</button>
<script>
function myFunction(){
    var x;
    var person=prompt("请输入你的名字","张三");
    if (person!=null && person!=""){
        x=person + "你快乐吗？";
        document.getElementById("id1").innerHTML=x;
    }
}
</script>
</body>
</html>

View Code

　　·打开一个新窗口（open（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="f1()" id="id2">点我打开</button>
<script>
    function f1() {
       var mywindow=window.open('','',"width=200,height=200");
        mywindow.document.write('<p>你好呀！</p>');

    }

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

View Code

　　·滚动到指定位置（scrollTo()）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="id1"></p>
<button onclick="myFunction()">点我</button>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function myFunction(){
    window.scrollTo(100,500)
}
</script>
</body>
</html>

View Code

　　·用setTimeout() 和 clearTimeout()设置和停止定时器

<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="class1">
    <form>
        <input type="button" value="开始计数!" onclick="f2()" />
        <input type="text" id="txt" />
        <input type="button" value="停止计数!" onclick="f3()" />
    </form>
</div>

<script>
var c=0;
var t;
var timer_is_on=0;
function f1(){
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout(function(){f1()},1000);
}
function f2(){
    if (!timer_is_on){
        timer_is_on=1;
        f1();
    }
}
function f3(){
    clearTimeout(t);
    timer_is_on=0;
}
</script>
</body>

</html>

View Code

　　·用setInterval() 和 clearInterval()设置和停止定时器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>计时器</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="class1">
    <form>
        <input type="button" value="开始计数!" onclick="f2()" />
        <input type="text" id="txt" />
        <input type="button" value="停止计数!" onclick="f3()" />
    </form>
</div>

<script>
var c=0;
var t;
var timer_is_on=0;
function f1(){
    document.getElementById('txt').value=c;
    c=c+1;
}
function f2(){
    f1()
    if (!timer_is_on){
        timer_is_on=1;
        t=setInterval(f1,1000)
    }
}
function f3(){
    clearInterval(t)
    timer_is_on=0;
}
</script>
</body>

</html>

View Code

　　·界面显示时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: black;
            text-align:center;
            font-size: 25px;
            font-family: "新宋体";
        }
    </style>
</head>
<div></div>
<body>
<div>
    <p id="id2"></p>
</div>
</body>
<script>
    document.getElementsByTagName("BODY")[0].onpageshow = function() {c()};
    function myFunction() {
        var curr=new Date().toLocaleString();
        document.getElementById("id2").innerHTML = curr;
}
function c() {
        myFunction();
        clock1=setInterval(myFunction,1000)

}

</script>
</html>

View Code

三·Navigator 对象（访问者的浏览器详情）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>navigator对象</title>
</head>
<body>
    
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>
</html>

View Code

四·History 对象

　　·返回一个URL历史清单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史清单</title>
</head>
<body>
<script>
    console.log(history);
    document.write("历史列表中URL的数量： " + history.length);
</script>
</body>
</html>

View Code

　　·前进后退按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前进后退</title>
</head>
<body>
<input type="button" value="返回" onclick="goback()">
<input type="button" value="前进" onclick="goforward()">
<a href="https://www.baidu.com/">点我</a>
<script>
    function goback(){
    window.history.back()
}
function goforward(){
    window.history.forward()
}
</script>
</body>
</html>

View Code

　　·从历史清单转到指定url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后退两页</title>
</head>
<body>
<input type="button" value="后退2页" onclick="goback()">
<script>
    function goback(){
    window.history.go(-2)
}
</script>
</body>
</html>

View Code

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 javascript中的BOM JAVAScript中DOM与BOM的差异分析理解JavaScript中BOM和DOM的关系 javaScript知识体系（中）- DOM、BOM、其它内置对象-总结 javascript中BOM部分基础知识总结 Javascript之BOM(window对象) JavaScript(4)---BOM详解 JavaScript BOM对象介绍 javascript-BOM操作 Javascript之BOM与DOM讲解