JavaScript的游览器对象

程序员文章站 2022-07-13 12:08:27

...

1.window对象

window对象是BOM的核心，window对象指当前的游览器窗口。

window对象方法：

JavaScript的游览器对象

2.JavaScript计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。

间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

3.计时器setInterval()

在执行时，从载入页面后每隔指定的时间执行代码。

语法：setInterval(代码,交互时间);

参数说明：

（1）代码：要调用的函数或要执行的代码串。

（2）交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计

返回值：一个可以传递给clearInterval()从而取消对“代码”的周期性执行值。

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

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
  var attime;
  function clock(){
    var time=new Date();          
    attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;
    document.getElementById("clock").value = attime;
  }
  setInterval(clock,1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
</form>
</body>
</html>

4.取消计时器clearInterval()

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

语法：clearInterval(id_of_setInterval);

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

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();               	  
      document.getElementById("clock").value = time;
   }
     var i=setInterval(clock,1000);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" 
    onclick="clearInterval(i)"/>
  </form>
</body>
</html>

5.计时器setTimeout()

setTimeout()计时器，在载入后延迟执行时间后，去执行一次表达式，仅执行一次。

语法：setTimeout(代码,延迟时间);

使setTimeout()实现计数统计效果，并在文本框中显示数值。

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout("startCount()",1000); 
  }
    setTimeout("startCount()",1000);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>

6.取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法：clearTimeout(id_of_setTimeout)

参数说明：id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

计时器代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>

<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onclick="startCount()" />
    <input type="button" value="Stop" onclick="stopCount()"  />
  </form>
</body>
</html>

7.History对象

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

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

语法：window.history.[属性|方法]

History对象属性：

History对象方法：

获取游览器历史列表中的URL代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History对象</title>
</head>
<script type="text/javascript">
  var HL =window.history.length    ;
  document.write(HL);
</script>
<body>
</body>
</html>

8.返回前一个游览的页面

back()方法，加载history列表中的前一个URL。

语法：window.history.back();

9.返回下一个游览的页面

forward()方法，加载history列表中的下一个URL。

如果倒退之后，再想回到倒退之间游览的页面，则可以使用forward方法。

语法：window.history.forward();

10.返回游览历史中的其他页面

go()方法，根据当前所处的页面，加载history列表中的某个具体的页面。

语法：window.history.go(number);

参数：

11.Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法：location.[属性][方法]

location对象属性：

location对象方法：

获取当前显示文档的URL代码：

document.write(window.location.href);

12.Navigator对象

Navigator对象包含有关游览器的信息，通常用于检测游览器与操作系统的版本。

对象属性：

查看浏览器的名称和版本，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
   var browser = navigator.appName;
  var version = navigator.appVersion;
  var appCode = navigator.appCodeName;
  var platSys = navigator.platform;
  var usersAg = navigator.userAgent;
  document.write("浏览器名称："+browser+"<br />"+"平台和版本信息："+version+"<br />"+"浏览器代码名称字符："+appCode+"<br />"+"浏览器操作系统平台："+platSys+"<br />"+"服务器头部的值："+usersAg)
  
</script>
<body>
</body>
</html>

13.userAgent

返回用户代理头的字符串（就是包括游览器版本信息等的字符串）

语法：navigator.userAgent

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
  function validB(){ 
    var u_agent =navigator.userAgent       ; 
    var B_name="不是想用的主流浏览器!"; 
    if(u_agent.indexOf("Firefox")>-1){ 
        B_name="Firefox"; 
    }else if(u_agent.indexOf("Chrome")>-1){ 
        B_name="Chrome"; 
    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
        B_name="IE(8-10)";  
    }
        document.write("浏览器:"+B_name+"<br>");
        document.write("u_agent:"+u_agent+"<br>"); 
  } 
</script>
</head>
<body>
  <form>
     <input type="button" value="查看浏览器"  
     onclick="validB()">
  </form>
</body>
</html>

14.screen对象

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

语法：window.screen.属性

对象的属性：

15.屏幕分辨率的高和宽

window.screen对象包含有关用户屏幕的信息。

screen.height返回屏幕分辨率的高

screen.width返回屏幕分辨率的宽

16.屏幕可用高和宽度

screen.availWidth属性返回访问者屏幕的宽度

screen.availHeight属性返回访问者屏幕的高度

相关标签： JavaScript 游览器对象

上一篇： 3.织梦上传的mp4文件提示多媒体文件类型不在许可列表和站内媒体选择无法显示

下一篇： JAVA视频MP4文件加密，Html5播放器调用

JavaScript的游览器对象

javascript中如何用构造函数创建对象以及子类的继承？

Javascript中apply、call、bind的用法讲解

js比较两个单独的数组或对象是否相等的实例代码

了解JavaScript函数中的默认参数

轻松学习JavaScript函数中的 Rest 参数

HTML5 视频播放(video),JavaScript控制视频的实例代码

儿童是我们的重点保护对象，那么儿童营养餐可以吃什么呢

JavaScript实现的反序列化json字符串操作示例

JavaScript实现滚动栏效果的方法

JavaScript实现正则去除a标签并保留内容的方法【测试可用】