什么是浏览器对象模型？

　　浏览器对象模型（BOM Browser Object Model）是JavaScript的组成之一，它提供了独立于内容和浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。

JavaScript中对象分为：

本地对象（native object）、内置对象（built-in object）、宿主对象（host object）。其中本地对象和宿主对象大家一般用的比较多。

使用BOM（浏览器对象模型）可以实现什么功能？

　　（1）弹出新的浏览器窗口

　　（2）移动、关闭浏览器窗口及调整窗口的大小。

　　（3）在浏览器窗口中实现前进和后退方法。

一个浏览器可以看成是一个window对象，下面为大家一一介绍常用三大属性的介绍及使用

　　1）document：提供当前页面的URL信息（比如：http://cn.bing.com/）并且可以重新加载当前页面货载入新页面。

　　　　语法如下：

document.URL

　　2）location：location常用属性是href，通过对此属性设置不同的网址，从而达到跳转功能。

　　　　　　语法如下：

 <!--首先定义一个函数-->

 function myclick() {

                 //定位到百度首页

                 location.href = "http://www.baidu.com";

             }

　　3）history：可以实现前进后退及刷新功能

 history.go(0)    //刷新当前页面

 history().go(-1)    //后退一页

 history().go(1)    //前进一页

下面重点来了，定时函数。

定时函数对我们以后的开发web工程师非常有用处的，下面介绍一下定时函数的常用方法及使用：

　　定时函数的常用方法：

　　　　1）setTimeout():用于在指定的毫秒后调用函数或者计算表达式；

　　　　　　语法：

　　　　　　setTimeout("函数名称",毫秒);

　　　　2）setinterval():可按照指定的周期来调用函数或者计算表达式；

　　　　　　语法：

　　　　　　setInterval("函数名称",周期性调用函数之间间隔秒数);

下面简单书写两个关于定时器的例子：

　　　1.setTimeout()

 //定义一个函数

 function Refresh()

 {

 Time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());

 setTimeout("Refresh()",1000);

 }

 //调用函数，逗号后为毫秒数（一分钟=60秒=60000毫秒）

 var timer=setTimeout("Refresh()",1000);

　　2.setinterval()

 //定义一个函数

 function Refresh()

 {

 var newDateObj = new Date();

 document.form1.txt_Time.value=newDateObj.toLocaleString();//使用当前区域设置并已被转换为字符串

 }

 var MyInterval=setInterval("Refresh()",1000);

也可以通过定时器来写一个自娱自乐的小程序，

　　可以每隔1秒换一张图片

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>时间函数</title>

     <script type="text/javascript">

 //定义变量，存储图片名称

 var i = 1;

         function go() {

             if (i<2) {

                 i++;

             } else {

                 i= 1;//图片循环打印完成再次赋初值1

             }

 //获取id为“ima”的doc对象，并为src属性再次赋值（路径）

             var doc = document.getElementById("ima");

             doc.src = 'images/iag/' + i + '.jpg';

         }

         setInterval(go, 1000);

 </head>

 <body>

 //src为图片路径，所以图片名称均为数组（因为在这里便于逐步遍历出来）

     <img src="data:images/iag/1.jpg" width="500px" height="600px" id="ima"/>

 </body>

JavaScript对象的常用属性及使用的更多相关文章

  1. JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  2. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  3. JavaScript对象的property属性详解

    JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...

  4. JavaScript对象就是一组属性(方法)的集合

    在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法) 很简单,即: 对象名.属性(方法)名 除此之外,还可以用方括号的形式来引用: 对象名[“属性(方法)名”] 注 ...

  5. javascript中array常用属性方法

    属性: length 表示一个无符号 32-bit 整数,返回一个数组中的元素个数. 截短数组..截短至长度2  则:   .length = 2 方法: Array.from() 方法可以将一个类数 ...

  6. 【JavaScript】浅析JavaScript对象如何添加属性和方法

    向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...

  7. JavaScript对象中的属性(可写，可配置，可枚举，value,getter,setter)

    JavaScript中,对象包括3个特性,分别为,可扩展性,class标识符,属性. 如果对象的可扩展性为false,则不可为对象动态的添加属性.   对象包含分为存取器属性和值属性.存取属性为 {g ...

  8. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  9. String对象的常用属性和方法

    属性 描述 length 在大多数情况下返回字符串中的字符数 方法 描述 toUpperCase() 将字符串修改为大写字母 toLowerCase() 将字符串修改为小写字母 charAt() 以索 ...

随机推荐

  1. 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失

    开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...

  2. 下载 Eclipse 免安装版~

    进入https://www.eclipse.org/downloads/

  3. pycharm解释器链接如何pymongo

    1.pymongo 链接数据库 # pycharm 链接我们的mogodb # 下载pymongo from pymongo import MongoClient # 客户端请求 服务端 # 链接 c ...

  4. SpringCloud系列（一）：Eureka 注册中心

    在演示spring cloud之前得要知道我们为什么需要微服务框架. 先讲讲我的经历,以前我们做项目时所有功能都写在一起,只是做了分层(模型,数据,业务),所有业务逻辑都写在业务层,刚开始还好,等时间 ...

  5. 流式布局和viewport

    流式布局 百分比布局,非固定宽度,内容向两边填充,流动的布局. viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的,这是因为移动端的网页不是直接放在移动端的浏览器中,而是放在移 ...

  6. ZROI 19.08.09模拟赛

    传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. A \(70pts:\) 维护一个栈,从一侧向另一侧扫描,如果新加入的元素与当前栈顶相同,则出栈,否则进栈.显然一个子串是括号序列,当 ...

  7. ZROI 19.07.31 AB班ACM

    写在前面:非常感谢cjc和djh两位神仙带我,非常感谢他们给了我一次躺赢的机会. 虽然我被硬点成了代码手,但我写的基本每次都有一堆罚时.然而djh爷全部1A,tql. 题目按照一血时间升序,大致符合难 ...

  8. 微信小程序-饮食日志_开发记录02

    此段时间主要写功能的实现. 内部的增删改查等内容. 主要有食物查找.运动选择.身高体重比例计算等.

  9. redis主从+keepalived实现高可用技术

    Redis是我们当下比较流行使用的非关系数据库,可支持多样化的数据类型,多线程高并发支持,redis运行在内存拥有更快的读写.因为redis的表现如此出色,如何能保障redis在运行中能够应对宕机故障 ...

  10. Python Number(数字) Ⅰ

    Python Number(数字) Python Number 数据类型http://www.xuanhe.net/用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的 ...