JavaScript-浏览器对象

引言

winodw对象是BOM的核心,window对象指当前的浏览器窗口。

浏览器对象方法

alert() 显示带有一段消息和一个确认按钮的警告框
prompt() 显示可提示用户输入的对话框
confirm() 显示带有一段消息以及确认取消按钮的对话框
open() 打开一个新的浏览器窗口或者查找一个已命名窗口
close() 关闭浏览器窗口
print() 打印当前窗口的内容
focus() 把键盘焦点给予一个窗口
blur() 把键盘焦点从顶层窗口移开
moveBy() 可相对窗口的当前坐标把它移动指定的像素
moveTo() 把窗口的左上角移动到一个指定的坐标
resizeBy() 按照指定的像素调整窗口的大小
scrollTo() 把内容滚动到指定的坐标
setInterval() 每隔指定的时间执行代码
setTimeout() 在指定的延迟时间之后来执行代码
clearInterval() 取消setInterval的设置
clearTimeout() 取消setTimeout的设置

JavaScript 计时器

在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
计时器类型:
setTimeout(); 指定延迟时间之后来执行代码;
clearTimeout():取消setTimeout()设置;
setInterval();每隔指定的时间执行代码;
clearInterval();取消setInterval()设置;

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。
语言
setInterval(代码,交互时间);
参数
代码:要调用的函数或要执行的代码串。
交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

返回值
一个可以传递给clearInterval()从而取消对“代码”的周期性执行的值。
调用函数格式(假设有一个clock()函数)
setInterval(“clock()”,1000)

setInterval(clock,1000);
我们设置一个计时器,每隔100毫秒调用clock()函数,并将时间显示出来

<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>

取消计时器clearInterval

clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法

clearInterval(id_of_setInterval)

参数说明
id_of_setInterval:由setInterval()返回的ID值。

计时器setTimeout()

clearTimeout()

 var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  }

History 对象

history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。

注意
从窗口被打开的那一刻开始记录,每一个浏览器窗口、每一个标签页乃至每个框架,都有自己的history对象和特定的window对象关联

语法

window.history.[属性|方法]

window可以省略

history对象属性
length 返回浏览器历史列表中的URL数量。

history对象方法
back() 加载history前一个URL
forward() 加载history后一个URL
go() 加载history具体的页面

使用length属性,当前窗口的浏览历史总长度

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

返回浏览历史中的其他页面go

  function GoBack() {
            window.history.go(-1);
        }

        function GoForward() {
            window.history.go(Math.random()*10);
        }

Location对象
location对象用于获取或设置窗体的URL,并且可以用于解析URL

语法:
location.[属性|方法]
这里写图片描述
location对象属性
这里写图片描述
location对象方法
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
这里写图片描述

screen对象

screen对象用于获取用户的屏幕信息。

window.screen.属性

这里写图片描述

屏幕分辨率的高和宽

window.screen对象包含有关用户屏幕的信息
1、screen.height 返回屏幕分辨率的高
2、screen.width 返回屏幕分辨率的宽

注意
1、单位以像素计。
2、window.screen对象在编写时可以不使用window这个前缀。

屏幕可用高和宽度

1、screen.availWidth属性返回访问者屏幕的宽度,以像素计,减去界面特性,如任务栏
2、screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。

注意
不同系统的任务默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度,代码如下:

script type="text/javascript">
document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值