软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> JavaScript学习笔记八 -> 正文阅读

[Web前端]JavaScript学习笔记八



本文根据慕课网课程《JavaScript进阶》学习整理

第8章 浏览器对象

8-1 window对象


??window对象BOM的核心,window对象指当前的浏览器窗口
??window对象方法:
??[img]http://img.mukewang.com/535483720001a54506670563.jpg

8-2 JavaScript 计时器


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

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

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

??计时器方法
??[img]http://img.mukewang.com/56976e1700014fc504090143.jpg

8-3 计时器setInterval()


??在执行时,从载入页面后每隔指定的时间执行代码。
??语法:
    setInterval(代码,交互时间);

??参数说明

  • 代码:要调用的函数或要执行的代码串。

  • 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

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

??我们设置一个计时器,每隔100毫秒调用clock()函数,并将时间显示出来,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<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>
</html>

8-4 取消计时器clearInterval()


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

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

??每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时,停止时间,代码如下:
<!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;
   }
// 每隔100毫秒调用clock函数,并将返回值赋值给i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

8-5 计时器setTimeout()


??setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
??语法:
    setTimeout(代码,延迟时间);

??参数说明
  • 要调用的函数或要执行的代码串。
  • 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

??当我们打开网页3秒后,在弹出一个提示框,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

??当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
    var t=setTimeout("alert('Hello!')",5000);
 }
</script>
</head>
<body>
<form>
    <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

??要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0;
  function numCount(){
     document.getElementById('txt').value=num;
     num=num+1;
     setTimeout("numCount()",1000);
  }
</script>
</head>
<body>
<form>
    <input type="text" id="txt" />
    <input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

8-6 取消计时器clearTimeout()


??setTimeout()clearTimeout()一起使用,停止计时器。
??语法:
    clearTimeout(id_of_setTimeout)

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

??下面的例子和上节的无穷循环的例子相似。唯一不同是,现在我们添加了一个 “Stop” 按钮来停止这个计数器:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

8-7 History 对象


??history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能
??注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
??语法:
    window.history.[属性|方法]

??注意:window可以省略。
??History 对象属性
??[img]http://img.mukewang.com/53548c030001759e05840068.jpg
??History 对象方法
??[img]http://img.mukewang.com/53548c200001228206210123.jpg
??使用length属性当前窗口的浏览历史总长度,代码如下:
  <script type="text/javascript">
     var HL = window.history.length;
     document.write(HL);
  </script>

8-8 返回前一个浏览的页面


??back()方法,加载 history 列表中的前一个 URL。
??语法:
    window.history.back();

??比如,返回前一个浏览的页面,代码如下:
   window.history.back();

??注意:等同于点击浏览器的倒退按钮。
??back()相当于go(-1),代码如下:
??window.history.go(-1);

8-9 返回下一个浏览的页面


??forward()方法,加载 history 列表中的下一个 URL。
??如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下:
    window.history.forward();

??注意:等价点击前进按钮。
??forward()相当于go(1),代码如下:
    window.history.go(1);

8-10 返回浏览历史中的其他页面


??go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。
??语法:
   window.history.go(number);

??参数:
??[img]http://img.mukewang.com/5354947e00011a9a06490153.jpg
??浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:
    window.history.go(-2);

??注意:和在浏览器中单击两次后退按钮操作一样。
??同理,返回当前页面之后浏览过的第三个历史页面,代码如下:
    window.history.go(3);

8-11 Location对象


??location用于获取或设置窗体的URL,并且可以用于解析URL。
??语法:
??location.[属性|方法]
??location对象属性图示:
??[img]http://img.mukewang.com/53605c5a0001b26909900216.jpg
??location 对象属性:
??[img]http://img.mukewang.com/5354b1d00001c4ec06220271.jpg
??location 对象方法:
??[img]http://img.mukewang.com/5354b1eb00016a2405170126.jpg

8-12 Navigator对象


??Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
??对象属性:
??[img]http://img.mukewang.com/5354cff70001428b06880190.jpg
??查看浏览器的名称和版本,代码如下:
<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

8-13 userAgent


??返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
??语法
   navigator.userAgent

??几种浏览的user_agent.,像360的兼容模式用的是IE、极速模式用的是chrom的内核。
??[img]http://img.mukewang.com/535a3a4a0001e03f06870189.jpg
??使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码如下:
function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  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:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
} 

??运行结果:
??[img]http://img.mukewang.com/535dea1e00017b0b06880265.jpg

8-14 screen对象


??screen对象用于获取用户的屏幕信息。
??语法:
??window.screen.属性
??对象属性:
??[img]http://img.mukewang.com/5354d2810001a47706210213.jpg

8-15 屏幕分辨率的高和宽


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

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

  • screen.width 返回屏幕分辨率的宽
    ??注意:

  • 单位以像素计。
  • window.screen 对象在编写时可以不使用 window 这个前缀。
    我们来获取屏幕的高和宽,代码如下:
<script type="text/javascript">
  document.write( "屏幕宽度:"+screen.width+"px<br />" );
  document.write( "屏幕高度:"+screen.height+"px<br />" );
</script>

8-16 屏幕可用高和宽度


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

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

??注意:
??不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。
??我们来获取屏幕的可用高和宽度,代码如下:
<script type="text/javascript">
    document.write("可用宽度:" + screen.availWidth);
    document.write("可用高度:" + screen.availHeight);
</script>

??注意:根据屏幕的不同显示值不同。

8-17 编程练习


??任务
  • 第一步: 先编写好网页布局,如下

??[img]http://img.mukewang.com/537d6eba0001779f03840115.jpg

  • 第二步: 获取显示秒数的元素,通过定时器来更改秒数。

  • 第三步: 通过window的location和history对象来控制网页的跳转。
<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
  <h2>操作成功</h2>
  <p><span id="time"> 5 </span>秒后回到主页&nbsp<a href="javascript:history.back()"> 返回</a></p>


  <script type="text/javascript">  

   //获取显示秒数的元素,通过定时器来更改秒数。
var num = document.getElementById("time").innerHTML;
   //通过window的location和history对象来控制网页的跳转。
var i = setInterval("if(num > 1){document.getElementById('time').innerHTML = --num;}else{location.assign('http://www.imooc.com');}", 1000);   
 </script> 
</body>
</html>

......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年1日历
2018-1-16 17:35:40
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --