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. string unicode utf8 ascii in python and js

    http://www.jb51.net/article/62155.htm http://www.cnblogs.com/dkblog/archive/2011/03/02/1980644.html ...

  2. CRM - 权限

    一.引入权限组件 引入权限组件 rbac settings: 'rbac.apps.RbacConfig', 中间件: 'rbac.service.rbac.ValidPermission', 员工表 ...

  3. Spark调优秘诀

    1.诊断内存的消耗 在Spark应用程序中,内存都消耗在哪了? 1.每个Java对象都有一个包含该对象元数据的对象头,其大小是16个Byte.由于在写代码时候,可能会出现这种情况:对象头比对象本身占有 ...

  4. 新版samba安装过程

    yum install samba samba-client samba-swat cp -p /etc/samba/smb.conf    /etc/samba/smb.conf.orig /bin ...

  5. ［ 翻译］ruby rails相关的常见服务器

    原文:http://stackoverflow.com/questions/4113299/ruby-on-rails-server-options     一,Apache vs Nginx     ...

  6. iOS error: -34018

    一般报这个错误是由于操作keychain 报的错. 遇到该情况的情况: 1.是否打开权限 2.苹果自身的bug,传送门:https://stackoverflow.com/questions/2974 ...

  7. c++第二十二天

    p120~p124: 表达式 1.表达式由一个或者多个运算对象组成. 2.最简单的表达式是字面值和变量. 3.一元运算符作用于一个运算对象,二元则作用于两个.一个运算符到底是几元由上下文决定. 4.重 ...

  8. MySQL "Zero date value prohibited" 问题解析

    问题起因 之前一直使用Oracle数据,对MySQL数据库使用不多,因此搞不懂MySQL的日期“0000-00-00 00:00:00”对程序会产生怎样的影响.费了我一下午的时间 -_-^^. 首先: ...

  9. Example解析

    本文总结自:https://github.com/abel533/Mapper/wiki/6.example,旨在提供一些基本概念上的解释 Example类用于条件查询,以代替冗长的"sel ...

  10. office 2010 安装时出错 MSXML版本6.10.1129.0

    微软下载网址:https://www.microsoft.com/zh-cn/download/details.aspx?id=6276&751be11f-ede8-5a0c-058c-2ee ...