JavaScript_11
1.Window History---历史对象
window.history 对象包含浏览器的历史信息。
history.back() - 与在浏览器点击后退按钮相同。
history.forward() - 与在浏览器中点击按钮向前相同。
history.go–加载history中的某个具体页面。
history.length–返回浏览器历史列表中的 URL 数量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testforward(){
window.history.forward();
}
//history.go()-加载history中的某个具体页面。
function go(){
//history.length返回浏览器历史列表中的 URL 数量。
var len=history.length;
var a=len-1;
window.history.go(2);
}
</script>
</head>
<body>
<h1>这是第一个窗口</h1>
<a href="test2.html">链接到第二个窗口</a>
<input type="button" value="前进" onclick="testforward()"/><br>
<input type="button" value="前进至最后一个" onclick="go()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testforward(){
window.history.forward();
}
function testback(){
window.history.back();
}
</script>
</head>
<body>
<h1>这是第二个页面</h1>
<a href="test3.html">链接到第三个页面</a><br>
<input type="button" value="前进" onclick="testforward()"/><br>
<input type="button" value="后退" onclick="testback()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testback(){
window.history.back();
}
//history.go()方法，加载history中的某个具体页面
function go(){
var len=history.length;
var a=(len-1)*-1
window.history.go(a);
}
</script>
</head>
<body>
<h1>这是第三个网页</h1>
<input type="button" name="" id="" value="后退" onclick="testback()"/><br>
<input type="button" value="后退至首页" onclick="go()"/>
</body>
</html>
注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效。
2.Window Navigator–浏览器的信息
window.navigator 对象包含有关访问者浏览器的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>");
document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");
document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");
document.write("<h1>启用Cookies:"+window.navigator.cookieEnabled+"</h1>");
document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");
document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");
document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");
</script>
</head>
<body>
</body>
</html>
JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码
setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() 方法
setInterval(“function”,milliseconds) 间隔指定的毫秒数不停地执行指定的代码。
参数1-指定的运行代码是一个function
参数2-指定的毫秒数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testsetInterval(){
var hobj=document.getElementById("test1");
setInterval(function(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
hobj.innerHTML=time;
},1000);
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value="测试setInterval()————1" onclick="testsetInterval();"/>
</body>
</html>
将setInerval()方法中执行运行的代码抽取成一个函数。
<script>
function testsetInterval(){
var hobj=document.getElementById("test1");
function mygetDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
hobj.innerHTML=time;
}
setInterval(function(){
mygetDate();},1000);
}
</script>
clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
参数intervalVariable--- setInterval()的返回值。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var mysetinterval=null;
function testsetInterval(){
var hobj=document.getElementById("test1");
function mygetDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
hobj.innerHTML=time;
}
mysetinterval=setInterval(function(){
mygetDate();},1000);
}
//停止setInterval
function testclearInterval(){
clearInterval(mysetinterval);
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value="测试setInterval()" onclick="testsetInterval();"/>
<input type="button" value="停止setInterval()" onclick="testclearInterval();"/>
</body>
</html>
setTimeout() 方法
暂停指定的毫秒数后执行指定的代码
参数1–指定运行的代码
参数2–指定的毫秒数
<script>
var mytestsetTimeout=null;
function testsetTimeout(){
var hobj=document.getElementById("test1");
function mygetDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
hobj.innerHTML=time;
}
mytestsetTimeout=setTimeout(function(){
mygetDate();},3000);
}
</script>
clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
参数timeoutVariable----setTimeout方法的返回值。
<script>
var mytestsetTimeout=null;
function testsetTimeout(){
var hobj=document.getElementById("test1");
function mygetDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
hobj.innerHTML=time;
}
mytestsetTimeout=setTimeout(function(){
mygetDate();},3000);
}
//停止setInterval
function testclearTimeout(){
clearTimeout(mytestsetTimeout);
}
</script>
