JavaScript_11
1.Window History—历史对象
- window.history 对象包含浏览器的历史信息。
- history.back() - 与在浏览器点击后退按钮相同。
- history.forward() - 与在浏览器中点击按钮向前相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function tonext(){
window.history.forward();
}
</script>
</head>
<body>
<h1>第一个测试页面</h1>
<a href="javascript_history1.html">链接到第一个测试页面</a><br>
<input type="button" value="前进" onclick="tonext();">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function tonext(){
window.history.forward();
}
function toback(){
window.history.back();
}
</script>
</head>
<body>
<h1>第二个测试页面</h1>
<a href="javascript_history2.html">连接到第三个测试页面</a><br>
<input type="button" value="前进" onclick="tonext();">
<input type="button" value="后退" onclick="toback();">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function toback(){
window.history.back();
}
</script>
</head>
<body>
<h1>第三个测试页面</h1>
<input type="button" value="后退" onclick="toback();">
</body>
</html>
注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效。
2.Window Navigator–浏览器的信息
window.navigator 对象包含有关访问者浏览器的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器信息</title>
<script>
document.write("<h3>浏览器代号："+window.navigator.appCodeName+"</h3>");
document.write("<h3>浏览器名称："+window.navigator.appName+"</h3>");
document.write("<h3>浏览器版本："+window.navigator.appVersion+"</h3>");
document.write("<h3>启用Cookies："+window.navigator.cookieEnabled+"</h3>");
document.write("<h3>硬件平台："+window.navigator.platform+"</h3>");
document.write("<h3>用户代理："+window.navigator.userAgent+"</h3>");
document.write("<h3>用户代理语言："+window.navigator.systemLanguage+"</h3>");
</script>
</head>
<body>
</body>
</html>
JavaScript 计时事件
JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() 方法
setInterval(“function”,milliseconds) 间隔指定的毫秒数不停地执行指定的代码。
参数1-指定的运行代码是一个function
参数2-指定的毫秒数
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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 myday=date.getDate();
var hour=date.getHours();
var minutes=date.getMinutes();
var second=date.getSeconds();
var time=year+"年"+month+"月"+myday+"日"+hour+":"+minutes+":"+second;
hobj.innerHTML=time;
},1000)
}
</script>
</head>
<body>
<h3 id="test1"></h3>
<input type="button" value="测试setinterval()" onclick="testsetinterval();">
</body>
</html>
将setInerval()方法中执行运行的代码抽取成一个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setinterval方法</title>
<script>
function testsetinterval(){
var hobj=document.getElementById("text1");
function testmyval(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var myday=date.getDate();
var hour=date.getHours();
var minutes=date.getMinutes();
var second=date.getSeconds();
var mytime=year+"年"+month+"月"+myday+"日"+hour+":"+minutes+":"+second;
hobj.innerHTML=mytime;
}
setInterval(function(){testmyval();},1000);
}
</script>
</head>
<body>
<h3 id="text1"></h3>
<input type="button" value="测试setinterval" onclick="testsetinterval();">
</body>
</html>
clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
参数intervalVariable— setInterval()的返回值。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clearinterval 方法</title>
<script>
function testsetinterval(){
var hobj=document.getElementById("text1");
function testmyval(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var myday=date.getDate();
var hour=date.getHours();
var minutes=date.getMinutes();
var second=date.getSeconds();
var mytime=year+"年"+month+"月"+myday+"日"+hour+":"+minutes+":"+second;
hobj.innerHTML=mytime;
}
mysetinterval=setInterval(function(){testmyval();},1000);
}
function testclearinterval(){
clearInterval(mysetinterval);
}
</script>
</head>
<body>
<h3 id="text1"></h3>
<input type="button" value="测试setinterval" onclick="testsetinterval();">
<input type="button" value="停止setinterval" onclick="testclearinterval();">
</body>
</html>
setTimeout() 方法
暂停指定的毫秒数后执行指定的代码
参数1–指定运行的代码
参数2–指定的毫秒数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clearinterval 方法</title>
<script>
var mysetinterval=null;
function testsettimeout(){
var hobj=document.getElementById("text1");
function testmyval(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var myday=date.getDate();
var hour=date.getHours();
var minutes=date.getMinutes();
var second=date.getSeconds();
var mytime=year+"年"+month+"月"+myday+"日"+hour+":"+minutes+":"+second;
hobj.innerHTML=mytime;
}
mysetinterval=setTimeout(function(){testmyval();},5000);
}
</script>
</head>
<body>
<h3 id="text1"></h3>
<input type="button" value="测试settimeout" onclick="testsettimeout();">
</body>
</html>
clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
参数timeoutVariable----setTimeout方法的返回值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cleartimeout 方法</title>
<script>
var mytestsetTimeout=null;
function testsetinterval(){
var hobj=document.getElementById("text1");
function testmyval(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var myday=date.getDate();
var hour=date.getHours();
var minutes=date.getMinutes();
var second=date.getSeconds();
var mytime=year+"年"+month+"月"+myday+"日"+hour+":"+minutes+":"+second;
hobj.innerHTML=mytime;
}
mytestsetTimeout=setTimeout(function(){testmyval();},3000);
}
function testclearTimeout(){
clearTimeout(mytestsetTimeout);
}
</script>
</head>
<body>
<h3 id="text1"></h3>
<input type="button" value="测试setTimeout()方法" onclick="testsetinterval();">
<input type="button" value="停止setTimeout()方法" onclick="testclearTimeout();">
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
