慕课网JavaScript进阶篇第8章学习笔记，JavaScript计时器，history对象，location对象，navigator对象，screen对象，综合练习题
JavaScript学习笔记（一）
JavaScript学习笔记（二）
JavaScript学习笔记（三）
JavaScript学习笔记（五）
window对象
window对象方法表：
JavaScript计时器
- 一次性计时器：
setTimeout()&clearTimeout() - 间隔性触发计时器：
setInterval()&clearInterval()
setInterval()&clearInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法：setInterval(代码,交互时间);
比如setInterval("clock()", 1000)
- 代码：要调用的函数或要执行的代码串；
- 交互时间：周期性执行或调用表达式的时间间隔，以毫秒为单位
返回值：一个可以传递给clearInterval()从而取消对“代码”的周期性执行的值
例子：
var attime;
function clock(){
var time=new Date();
attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value = attime;
}//把attime的值赋给文本框要显示的值
var timer = setInterval(clock,1000);//调用函数clock()显示当前系统时间
...
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclik="clearInterval(timer)" />
//clearInterval()取消由setInterval()设置的交互时间
</form>
setTimeout()&clearTimeout()
在载入后延迟指定时间后，去执行一次表达式，仅执行一次
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身：
<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);//语法：clearTimeout(id_of_setTimeout)
}
</script>
...
<form>
<input type="text" id="count" />
<input type="button" value="Start" onClick="startCount()" />
<input type="button" value="Stop" onClick="stopCount()" />
</form>
history对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法] //window可以省略
history对象属性：length，返回浏览器历史列表的URL数量
var HL = window.history.length;
document.write(HL);
history对象方法：
back() window.history.back();forward() window.history.forward();go() window.history.go(number);
location对象
location用于获取或设置窗体的URL，并且可以用于解析URL
语法：location.[属性|方法]
location对象属性图示：
location对象属性：
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从'#'开始的URL（锚） |
| host | 设置或返回主机名和当前的URL端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |
| pathname | 设置或返回当前URL的路径部分 |
| port | 设置或返回当前URL的端口号 |
| protocol | 设置或返回当前URL的协议 |
| search | 设置或返回从'?'开始的URL（含查询部分） |
location对象方法：
- assign():加载新的文档
- reload():重新加载当前文档
- replace():用新文档替换当前文档
navigator对象
navigator对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本
语法：navigator.属性
对象属性：
| 属性 | 描述 |
|---|---|
| appCodeName | 浏览器代码名的字符串表示 |
| appName | 浏览器名称 |
| appVersion | 浏览器的平台和版本信息 |
| platform | 运行浏览器的操作系统平台 |
| userAgent | 由客户机发送服务器的user-agent头部的值 |
userAgent
userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头(user-agent header)的值
一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和navigator.appVersion的值构成的
例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)
（参考W3Cschool）
screen对象
用于获取用户的屏幕信息
语法： window.screen.属性 //window可省略
属性：
- availHeight: 窗口可以使用的屏幕高度（像素）
- availWidth: 窗口可以使用的屏幕宽度（像素）
- colorDepth: 用户浏览器表示的颜色位数，通常为32位（每像素的位数）
- pixelDepth: 用户浏览器表示的颜色位数，通常为32位（每像素的位数）【IE不支持此属性】
- height: 屏幕高度
- width: 屏幕宽度
练习题
要求：
如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页；
如果点击“返回”按钮则返回前一个页面
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<span id="second" >5</span>秒后回到主页<a href="javascript:back();">返回</a>
<script type="text/javascript">
var num = document.getElementById("second").innerHTML;//给num赋予"second"XX值，5
function count(){
num--;
document.getElementById("second").innerHTML = num;//改变"second"XX值为num现在的值(num--)
if(num==1){
location.assign("http://www.imooc.com");
}
}
setInterval("count()",1000);
function back(){//可以删掉这个
window.history.back();
}
</script>
</body>
还可以通过在count()函数内部加setTimeout(count, 1000);，函数外部加setTimeout(count, 1000);来代替setInterval(count, 1000)
