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. POI官网中的例子

    官方指南中的例子: http://poi.apache.org/spreadsheet/quick-guide.html#New+Sheet 这一节 Workbook wb = new HSSFWor ...

  2. 7.1 - CRM系统

    一.简介 crm 客户关系管理软件 ( Customer Relationship Management ) ( 详细内容 ) stark组件(仿admin组件)( 详细内容 ) rbac组件(基于角 ...

  3. 当Web访问性能出现问题，如何深探？

    对运维或开发工程师来说,遇到访问性能问题时,最先需要定位的是问题出现在哪个环节,是网络的问题,服务端的问题,还是客户端的问题? 往往技术人员喜欢把精力放在保障后端服务的可用性方面,而对前端界面是否能正 ...

  4. postman app支持浏览器上的cookie

    1.  安装postman app 注意要安装postman application(一个应用软件),而不是chrome 插件,打开下面的这个开关 2. chrom浏览器 给chrom浏览器安装pos ...

  5. kubernetes实战(十)：k8s使用Helm安装harbor

    1.基本概念 对于复杂的应用中间件,需要设置镜像运行的需求.环境变量,并且需要定制存储.网络等设置,最后设计和编写Deployment.Configmap.Service及Ingress等相关yaml ...

  6. sql小知识

    1:查询某一段落内的几条数据,按时间降序. LIMIT 5,10; //检索记录行6-15 2:创建视图,  查询出某些类别的数据,保存在视图中.  || 的优先级高于and ) ); 3:  查询出 ...

  7. 如何确定selenium ID元素是否查找正确

    编写脚本时,如何确定通过id查找的id是否真实存在,点击css,然后输入#(代表id)id名,如#kd,回车之后,能返回结果,便代表存在.

  8. [转]AJAX 跨源 HTTP 请求

    转自OSChina, 原文: http://www.oschina.net/translate/ajax-cross-origin-http-request 背景 跨源HTTP请求(也称跨域AJAX请 ...

  9. 线程，协程，IO模型

    理论: 1.每创造一个进程,默认里面就有一个线程 2.进程是一个资源单位,而进程里面的线程才是CPU上的一个调度单位 3.一个进程里面的多个线程,是共享这个进程里面的资源的 4.线程创建的开销比进程要 ...

  10. django2.0关于path匹配路径页面刷新不出来的问题

    下面是官方文档的内容,如果在urls.py中使用到正则匹配路径(^$)的时候,就需要使用re_path,而不能使用path,不然页面会显示404错误, 如果未用到正则,那么使用path即可. re_p ...