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. 信息收集1：DNSEUM命令

    1,背景 今天无意中发现了dnsenum这个工具,在网上搜了下关于dnsenum的介绍和安装使用方法,资料不是很全,但还好这个工具也算简单,网上也都有源码,可以自行下载下来阅读阅读.本人好奇在本机(u ...

  2. Webservice实践（七）CXF 与Spring结合+tomcat发布

    上一节介绍了如何使用CXF 来发布服务,但是没有介绍使用web 容器来发布,很多项目需要用tomcat 这样的容器来发布.另外本节将介绍CXF 与spring 结合的方法. 一 目标: 1.利用spi ...

  3. Oracle安装部署之 6节点11g cluster环境搭建

    **********************集群规划*************************************** --配置主机,共需要8台主机,其中6台做grid集群,1台作为存储服 ...

  4. CSS伪代码

    /*在p之后插入我是好人*/ p.first:after { content: "好人" } /*在p之前插入亲爱的朋友men*/ p:before { content: &quo ...

  5. Linux资源使用配置文件 /etc/security/limits.conf

    Linux资源使用配置文件 /etc/security/limits.conf http://www.linuxidc.com/Linux/2012-05/59489.htm Linux就这个范儿P5 ...

  6. Python之traceback错误堆栈信息处理

    一.Python中的异常栈跟踪 之前在做Java的时候,异常对象默认就包含stacktrace相关的信息,通过异常对象的相关方法printStackTrace()和getStackTrace()等方法 ...

  7. Spark Core（二）Driver上的Task的生成、分配、调度（转载）

    1. 什么是Task? 在前面的章节里描述过几个角色,Driver(Client),Master,Worker(Executor),Driver会提交Application到Master进行Worke ...

  8. Web安全大揭秘

    web安全大揭秘,通常会有那些web安全问题呢? 1,xss 2,sql注入 3,ddos攻击

  9. Winform 下使用WebBrowser的HTML编辑控件—WinHtmlControl 在win7 IE9下的问题

    问题是这样的,有一个需要用到富文本的地方,由于是winform的程序,而且程序是上一代老员工留下的,错误百出,现在要尽量修复,至少保证能正常使用,于是就开始一点点问题修复. 在win7 64位系统下出 ...

  10. javascript-复制

    cefCopy:function(str){ var t=this; if(!str || str=="暂无激活码") { $.notice("暂无激活码", ...