JavaScript_11
1.Window History—历史对象
window.history 对象包含浏览器的历史信息。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
页面一:
<title>Document</title>
<script>
//前进
function toNext(){
window.history.forward();
}
/* //后退
function toBack(){
window.history.back();
} */
</script>
</head>
<body>
<h1>第一个测试页面</h1>
<a href="第二个测试页面.html">链接第一个页面</a><br>
<input type="button" value="前进" onclick="toNext();"><br>
<!-- <input type="button" value="后退" οnclick="toBack();"> -->
<img src="img/01ca01be6e0e4c218a92f454db76cfcb.jpeg" alt="">
</body>
</html>
页面二:
<title>Document</title>
<script>
//window.οnlοad=function(){
//前进
function toNext(){
window.history.forward();
}
//后退
function toBack(){
window.history.back();
}
// }
</script>
</head>
<body>
<h1>第二个测试页面</h1>
<a href="第三个页面.html">链接第三个页面</a><br>
<input type="button" value="前进" onclick="toNext();"><br>
<input type="button" value="后退" onclick="toBack();"><br>
<img src="img/f095cbf2fc3c396b" alt="">
</body>
</html>
页面三:
<title>Document</title>
<script>
function toBack(){
window.history.back();
}
</script>
</head>
<body>
<h1>第三个测试页面</h1>
<a href="第二个测试页面.html">链接第二个页面</a><br>
<!-- <input type="button" value="前进" οnclick="toNext();"><br> -->
<input type="button" value="后退" onclick="toBack();"><br>
<img src="img/fea4a51bc35cf4ad" alt="">
</body>
</html>
注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效。
2.Window Navigator–浏览器的信息
window.navigator 对象包含有关访问者浏览器的信息。
<title>Document</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>
谷歌浏览器:
IE浏览器:
QQ浏览器:
JavaScript 计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码
setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() 方法
setInterval(“function”,milliseconds) 间隔指定的毫秒数不停地执行指定的代码。
参数1-指定的运行代码是一个function
参数2-指定的毫秒数
<title>Document</title>
<script>
function testsetInterval(){
var shijian=document.getElementById("test1");
setInterval(function(){
var date = new Date();
var nian=date.getFullYear();
var yue=date.getMonth()+1;
var ri=date.getDate();
var shi=date.getHours();
var fen=date.getMinutes();
var miao=date.getSeconds();
var time = nian +"年"+ yue +"月"+ ri +"日"+ shi +":"+ fen +":"+ miao
//shijian.innerHTML = new String(date);
shijian.innerHTML=time;
},1000);
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value=" 测试 setInterval() ----1" onclick="testsetInterval();">
</body>
</html>
方法二:
将setInerval()方法中执行运行的代码抽取成一个函数。
<title>Document</title>
<script>
function testsetInterval(){
var shijian=document.getElementById("test1");
function mygetdate(){
var date = new Date();
var nian=date.getFullYear();
var yue=date.getMonth()+1;
var ri=date.getDate();
var shi=date.getHours();
var fen=date.getMinutes();
var miao=date.getSeconds();
var time = nian +"年"+ yue +"月"+ ri +"日"+ shi +":"+ fen +":"+ miao
//shijian.innerHTML = new String(date);
shijian.innerHTML=time;
}
setInterval(function(){mygetdate();},1000);
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value=" 测试 setInterval() ----1" onclick="testsetInterval();">
</body>
</html>
clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
参数intervalVariable— setInterval()的返回值。
<title>Document</title>
<script>
var mysetinterval = null;
function testsetInterval() {
var shijian = document.getElementById("test1");
function mygetdate() {
var date = new Date();
var nian = date.getFullYear();
var yue = date.getMonth() + 1;
var ri = date.getDate();
var shi = date.getHours();
var fen = date.getMinutes();
var miao = date.getSeconds();
var time = nian + "年" + yue + "月" + ri + "日" + shi + ":" + fen + ":" + miao
//shijian.innerHTML = new String(date);
shijian.innerHTML = time;
}
mysetinterval = setInterval(function () { mygetdate(); }, 1000);
}
//停止setInterval() 方法执行的函数代码。
function testclearInterval() {
clearInterval(mysetinterval);
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value=" 测试 setInterval() ----1" onclick="testsetInterval();"><br>
<input type="button" value=" clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。"
onclick="testclearInterval();">
</body>
</html>
setTimeout() 方法
暂停指定的毫秒数后执行指定的代码
参数1–指定运行的代码
参数2–指定的毫秒数
<title>Document</title>
<script>
var mysetTimeout = null;
function testsetTimeout() {
var shijian = document.getElementById("test1");
function mygetdate() {
var date = new Date();
var nian = date.getFullYear();
var yue = date.getMonth() + 1;
var ri = date.getDate();
var shi = date.getHours();
var fen = date.getMinutes();
var miao = date.getSeconds();
var time = nian + "年" + yue + "月" + ri + "日" + shi + ":" + fen + ":" + miao
//shijian.innerHTML = new String(date);
shijian.innerHTML = time;
}
mytestsetTimeout = setTimeout(function () { mygetdate(); }, 3000);
}
//停止setInterval() 方法执行的函数代码。
function testclearInterval() {
clearInterval(mysetinterval);
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value=" 测试 setTimeout()" onclick="testsetTimeout();"><br>
<input type="button" value=" clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。"
onclick="testclearInterval();">
</body>
</html>