Bom：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作

　　　　（1）window对象：当前浏览器窗体
　　　　　　　　属性：
　　　　　　　　　　status：状态栏(目前浏览器已弃用了）

　　　　　　　　　　opener：即谁打开我的，若在A用open打开B则B的opener就是A

　　　　　　　　　　closed：判断子窗体是否关闭

　　　　　　　　方法：
　　　　　　　　　　alert()  弹出框

　　　　　　　　　　confirm() 带确认,取消弹出框

　　　　　　　　　　setInterval() 每隔多少秒调用一次

　　　　　　　　　　clearInterval() 清除setInterval

　　　　　　　　　　setTimeout() 隔多少秒调用一次

　　　　　　　　　　cleartimeout() 清除setTimeout

　　　　　　　　　　open() 打开一个新的窗口

　　　　　　　　　　　eg :  window.open("other.html"," _blank","width=200,height=300,top=300");

　　　　　　　　　　console:最常用的就是console.log()浏览器控制台打印
　　　　（2）子对象：doument loation history screen ……

　　　　　　1、 doument  （讲dom已经介绍过它的属性方法 ，有感兴趣的可以翻看dom操作）

　　　　　　2、 loation 跳转位置
　　　　　　　　<meta http-equiv="refresh" content="3; url =http://www.hteis.cn";>      //不加url指3秒刷新一次，加url指3秒跳转
　　　　　　　　window.location.href="popl.html";
　　　　　　　　location = pop.html
　　　　　　　　location.replace("pop.html") //浏览器不可以后退

　　　　　　3、 history 历史
　　　　　　　　history.back() == history.go(-1)   //返回到前一页
　　　　　　　　history.go(-2) //括号里的参数负几就是返回前几步

　　　　　　　　eg: <a href="javascript:history.back()">返回上一页</a>

　　　　　　　　　　<a href="javascript:history.go(-2)">第一页</a>

　　　　　　4、 screen //屏幕
　　　　　　　　screen.availHeight //屏幕实际高度
　　　　　　　　screen.availWidth //屏幕实际宽度
　　　　　　　　screen.height //屏幕高度
　　　　　　　　screen.width //屏幕宽度　

        console.log("屏幕实际高度"+screen.availHeight);

        console.log("屏幕实际宽度"+screen.availWidth);

        console.log("屏幕高度"+screen.height);

        console.log("屏幕宽度"+screen.width);

最后赋一个使用计时器做的小例子，跑马灯和小球运动效果

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #one{

                width:100px;

                height: 100px;

                background-color: red;

                position: fixed;

                left:0;

                top:0;

                border-radius: 50%;

            }

            #two{

                width:100px;

                height:20px;

                background-color: #0f0;

                position: fixed;

                right:10px;

                top:10px;

            }

            html,body{

                width:100%;

                height:100%;

            }

        </style>

    </head>

    <body>

        <div id="one"></div>

        <div id="two">跑起来</div>

        <script>

            var x = 0;

            var y = 0;

            var xs=10;

            var ys=10;

            var left = document.body.clientWidth;

            var one = document.getElementById("one");

            var two = document.getElementById("two");

            function move(){

                x += xs;

                y += ys;

                if(x >= document.body.clientWidth-one.offsetWidth-20 || x < 0){

                    xs=-1*xs;

                }

                if(y >= document.body.clientHeight-one.offsetHeight-20 || y < 0){

                    ys=-1*ys;

                }

                one.style.left = x+"px";

                one.style.top = y+"px";

            }

            var dt = setInterval("move()",100);

            one.onmouseover = function(){

                clearInterval(dt)

            }

            one.onmouseout = function(){

                dt = setInterval("move()",100);

            }

            //跑马灯

            function leftMove(){

                if(left <=100){

                    left =  document.body.clientWidth;

                }

                left=left-10;

                two.style.left = left+"px";

            }

            var dl = setInterval("leftMove()",100);

            two.onmouseover = function(){

                clearInterval(dl);

            }

            two.onmouseout = function(){

                dl = setInterval("leftMove()",100);

            }

        </script>

    </body>

    </html>

若有错误欢迎留言指正

作者：BlancheWang 
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

JS BOM操作的更多相关文章

  1. JS——BOM操作（基本用法与实现：open()、close()、scrollTop等了解）

    (1)window.open() 定义和用法 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口 语法 window.open(URL,name,specs,replace) [默认填 ...

  2. JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. JS的BOM操作语法

    整理了一下JS的BOM操作语法,这里记录一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. day45:JS中的json&JS的BOM操作和DOM操作

    目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...

  5. 5、前端--js常量、变量、5种基本数据类型（number string boolean undefined object）、运算符、流程控制、三元运算符、函数、自定义对象、内置对象、BOM操作

    变量与常量 在JS中声明变量需要使用关键字 老版本 var(全部都是全局变量) 新版本 let(可以声明局部变量) # 推荐使用let(其实问题不大) 在JS中声明常量也需要使用关键字 const # ...

  6. JS中BOM操作知识点

    JS BOM window对象 全局变量和全局方法都归在window上 alert-comfirm-prompt 让alert .confirm等弹出框上的提示文字实现换行:\n // confirm ...

  7. JS BOM简列

    JS BOM BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准.所以,BOM 本身是没有 ...

  8. 前端3 — js — BOM没完（ 不了解也行 ）

    1.js是什么? -- 英文全称javascript javaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚 ...

  9. BOM操作

    BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red" ...

随机推荐

  1. 利用maven-assembly-plugin加载不同环境所需的配置文件及使用场景

    背景: 如何加载不同环境的配置文件已经成了势在必行的,我们通常利用profile进行,详情参见我上篇博客 http://www.cnblogs.com/lianshan/p/7347890.html, ...

  2. uboot ping doesn’t work

    Ping doesn't work Ping from U-Boot to a host should work. Ping from a host to U-Boot should not. U-B ...

  3. MySQL两大存储引擎：MyISAM和InnoDB

    Mysql有两大常用的存储引擎MyISAM,InnoDB,默认的形式是前者. 两者基本的差别是对事务处理.外键和行级锁的主持上,InnoDB支持事务处理.外键等高级特性,而MyISAM不支持.MyIS ...

  4. Unknown Treasure---hdu5446（卢卡斯+中国剩余定理）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5446 C(n, m) % (p1*p2*p3*...*pk)的值 其实这个就是中国剩余定理最后算出结果 ...

  5. 【loadrunner】【scorm学习】demo/test域上进行scorm脚本录制及回放成功脚本备份

    vuser_init() { //web_set_sockets_option('SSL_VERSION','TLS'); lr_start_transaction("login" ...

  6. PAT 1082 Read Number in Chinese[难]

    1082 Read Number in Chinese (25 分) Given an integer with no more than 9 digits, you are supposed to ...

  7. mac3.0环境搭建

    export ANDROID_SDK_ROOT=/Users/sjxxpc/Documents/ADT/sdk export ANDROID_NDK_ROOT=/Users/sjxxpc/Docume ...

  8. SQL学习笔记七之MySQL视图、触发器、事务、存储过程、函数

    阅读目录 一 视图 二 触发器 三 事务 四 存储过程 五 函数 六 流程控制 一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...

  9. Python3.x：os.chdir（改变当前路径方法）介绍

    Python3.x:os.chdir(改变当前路径方法)介绍 1,os.chdir() import os os.chdir(r'C:\python36\test_chdir') 说明:chdir() ...

  10. linux及安全《Linux内核设计与实现》第二章——20135227黄晓妍

    第二章:从内核出发 2.1获取源代码 2.1.1使用git Git:内核开发者们用来管理Linux内核源代码的控制系统. 我们使用git来下载和管理Linux源代码. 2.1.2安装内核源代码(如果使 ...