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. 【spring mvc】application context中【bean】的生命周期

    生命周期过程 主要分为四部分: 一.实例化 1. 当调用者通过 getBean( name )向 容器寻找Bean 时,如果容器注册了org.springframework.beans.factory ...

  2. 前端页面汉子显示为问号，需修改 linux下面修改mysql 数据库的字符编码为utf8

    设置MySQL数据库编码为UTF-8 登陆后查看数据库当前编码:SHOW VARIABLES LIKE 'char%'; 修改/etc/mysql/my.cnf (默认安装路径下) (标签下没有的添加 ...

  3. hdu1286(找新朋友）&&POJ2407Relatives（欧拉函数模版题）

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 没什么好说的,模板题,主要是弄懂欧拉函数的思想. #include <iostream> #i ...

  4. MySQL server has gone away With statement: INSERT INTO `students`......

    mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 首选分析给出可能出现的 ...

  5. Webwork 学习笔记

    1. 首先配置一个简单的webwork应用 核心jar: commons-logging.jarognl.jaroscore.jarvelocity-dep.jarwebwork-2.1.7.jarx ...

  6. node核心：异步流程控制

    Node.js的异步是整个学习Node.js过程中重中之重. 1)异步流程控制学习重点 2)Api写法:Error-first Callback 和 EventEmitter 3)中流砥柱:Promi ...

  7. html5 七巧板

    <!DOCTYPE html><html>    <canvas id="diag" height="200" width=&qu ...

  8. 028-touch命令

    1.创建空文件.可以创建一个空文件,也可以批量创建空文件. 2.更改文件/目录的访问时间,如果文件存在就更改访问时间,不存在就创建.# touch -a 3.更改文件的访问时间和修改时间.如果文件存在 ...

  9. 20155305乔磊2016-2017-2《Java程序设计》第九周学习总结

    20155305 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC入门 JDBC简介 1.JDBC是java联机数据库的标准规范,它定义了一组标准类与 ...

  10. c++第二十八天

    p140~p144:逗号运算符1.特点:1)规定运算顺序,即由左向右.2)逗号运算符的真正结果是右侧表达式的值! 练习 4.31 使用后置的运算符会有额外的内存开销, 在这道题中使用前置和后置结果貌似 ...