JavaScript对象的常用属性及使用
什么是浏览器对象模型?
浏览器对象模型(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对象的常用属性及使用的更多相关文章
- 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 ...
- JavaScript中Number常用属性和方法
title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...
- JavaScript对象的property属性详解
JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...
- JavaScript对象就是一组属性(方法)的集合
在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法) 很简单,即: 对象名.属性(方法)名 除此之外,还可以用方括号的形式来引用: 对象名[“属性(方法)名”] 注 ...
- javascript中array常用属性方法
属性: length 表示一个无符号 32-bit 整数,返回一个数组中的元素个数. 截短数组..截短至长度2 则: .length = 2 方法: Array.from() 方法可以将一个类数 ...
- 【JavaScript】浅析JavaScript对象如何添加属性和方法
向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...
- JavaScript对象中的属性(可写,可配置,可枚举,value,getter,setter)
JavaScript中,对象包括3个特性,分别为,可扩展性,class标识符,属性. 如果对象的可扩展性为false,则不可为对象动态的添加属性. 对象包含分为存取器属性和值属性.存取属性为 {g ...
- DOM中document对象的常用属性方法
每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返 ...
- String对象的常用属性和方法
属性 描述 length 在大多数情况下返回字符串中的字符数 方法 描述 toUpperCase() 将字符串修改为大写字母 toLowerCase() 将字符串修改为小写字母 charAt() 以索 ...
随机推荐
- No application found. Either work inside a view function or push an application context.
flask报了这个错,字面意思是说没有应用上下文,字面给的解决意见是要么放置在一个视图内,要么提供一个应用(flask)上下文. 查看文档发现文档给了个解决方案: 一个是通过app.app_conte ...
- ASP.NET 中 取得 Repeater 里的checkbox值
前言:这两天在维护ASP.NET的项目,需要做一个checkbox来选择数据进行导出,下面提供两种解决思路 1.ASP:CheckBox asp:CheckBox自带控件,没有Value值 <a ...
- 转载:网络编程 socket 可读可写条件判断
转自:http://blog.csdn.net/majianfei1023/article/details/45788591 要了解socket可读可写条件,我们先了解几个概念:1.接收缓存区低水位标 ...
- Java编程思想 第21章 并发
这是在2013年的笔记整理.现在重新拿出来,放在网上,重新总结下. 两种基本的线程实现方式 以及中断 package thread; /** * * @author zjf * @create_tim ...
- Vue props双向绑定
props是不能改变的 项目里遇到一个问题,就是props的组件内是不能改变,就像react中的props值也是不能改变的, 所以我在用的时候竟然忽略了这个点.真的要反省反省, 下面就是这个报错的问题 ...
- HDU-3415-Max Sum of Max-K-sub-sequence(单调队列,带限制的最大子段和)
链接: https://vjudge.net/problem/HDU-3415 题意: Given a circle sequence A[1],A[2],A[3]......A[n]. Circle ...
- Codeforces Round #569 (Div. 2) B. Nick and Array
链接: https://codeforces.com/contest/1180/problem/B 题意: Nick had received an awesome array of integers ...
- Python的题目
1.将元组 (1,2,3) 和集合 {4,5,6} 合并成一个列表.2.在列表 [1,2,3,4,5,6] 首尾分别添加整型元素 7 和 0.3.反转列表 [0,1,2,3,4,5,6,7] .4.反 ...
- 第十二章 学习 shell脚本之前的基础知识
http://www.92csz.com/study/linux/12.htm [什么是shell] 简单点理解,就是系统跟计算机硬件交互时使用的中间介质,它只是系统的一个工具.实际上,在shell和 ...
- 【NOIP2014模拟11.3】蛋糕
题目 今天是Bessie的生日,他买了一个蛋糕和朋友们一起分享,蛋糕可以看成是一个R行C列的表格,共有R*C个格子,每个格子都有一个0至9的数字,表示该格子蛋糕拥有的巧克力.现在Bessie要把蛋糕横 ...