一.window - 计时器
1?setTimeout()可以用来在指定的时间之后单次调用函数。
setTimeount(f,1000);//一秒后调用函数f
clearTimeout();取消函数的执行
示例：用setTimeout函数在1秒后改变字体的大小为60px。
<html>
<head>
<script>
function invoke(f,start){
setTimeout(f,start);
}
function changeSize(){
//改变元素的class
var e = document.getElementById("h1");
e.className= ‘bigSize‘;
}
</script>
<style>
.bigSize{
font-size:60px;;
}
</style>
</head>
<body >
<h1 class="" id="h1">改变字体的大小</h1>
</body>
</html>
2、setInterval()可以用来指定的时间之后重复调用函数。
setInterval(f,1000);//每1秒调用函数f clearInterval();取消函数的调用 示例：用setInterval函数重复的改变字体的大小，大小值是随机产生的。
<html>
<head>
<script>
var h;
function invoke(f,start){
h = setInterval(f,start);
}
function stop(){
clearInterval(h);
}
function changeColor(){
//改变元素的class
var e = document.getElementById("h1");
if(e.className == "oldSize"){
e.className= "newSize";
}else{
e.className= "oldSize";
}
}
</script>
<style>
.oldSize{
font-size:10px;
}
.newSize{
font-size:Math.floor(Math.random() * ( 50 + 1));;
}
</style>
</head>
<body >
<h1 class="" id="h1">改变字体的大小</h1>
<input type="button" value="结束" onclick="stop()"/>
</body>
</html>
二.location(定位)
1?window对象的location属性对象，表示该窗口中当前显示的文档URL，也可以载入新的文档。
2?document对象的location与window对象的location是同一个。
3?常用的属性：
- location.href ：返回当前页面的 URL
- location.hostname ：返回 web 主机的域名
- location.pathname ：返回当前页面的路径和文件名
- location.port 返回 web ：主机的端口
- location.protocol ：返回所使用的 web 协议（http:// 或 https://）
-
html> <head> <script> function showLocation(){ var content = ""; content += " url:"+window.location.href; content += " hostname:"+window.location.hostname; content += " pathname:"+window.location.pathname; document.getElementById("content").innerHTML = content; } </script> </head> <body > <div id="content"></div> </body> </html>4.载入新的文档
- location对象的assign()方法可以载入你指定的URL文档。
- location对象的replace()方法跟assign()类似，但它会从浏览历史中把当前文档删除。
- location对象的reload()方法可重新载入当前的文档。
- 也可用location = url的方式使浏览器跳转到新页面。
-
<html> <head> <script> function onAssign(){ var objWindow = document.getElementById(‘frame1‘).contentWindow ; objWindow.location.assign(‘http://www.baidu.com‘); } function onReplace(){ var objWindow = document.getElementById(‘frame1‘).contentWindow ; objWindow.location.replace(‘http://www.sina.com.cn‘); } function onReload(){ var objWindow = document.getElementById(‘frame1‘).contentWindow ; objWindow.location.reload(); } function onjump(){ var objWindow = document.getElementById(‘frame1‘).contentWindow ; objWindow.location = "http://www.baidu.com"; } </script> </head> <body> <input type="button" value="assign" onclick="onAssign()"/> <input type="button" value="replace" onclick="onReplace()"/> <input type="button" value="reload" onclick="onReload()"/> <input type="button" value="传统跳转" onclick="onjump()"/> <iframe name="frame1" id="frame1" src=""></iframe> </body> </html>5.小案例：在页面上显示倒数计时5秒后跳转到http://www.baidu.com页面。
<html> <head> <title>浏览器对象</title> <meta http-equiv="Content-Type" content="text/html; charset=gkb"/> </head> <body> <!--先编写好网页布局--> <p><span id="mytime" style="font-weight:bold;"></span>秒后回到主页<input type="button" value="返回" onclick="click()" /></p> <script type="text/javascript"> //获取显示秒数的元素，通过定时器来更改秒数。 var num=5; function time(){ var mytime=document.getElementById("mytime"); mytime.innerHTML = num; num = num - 1; setTimeout(time, 1000); if(num == 0) location.href = "http://www.baidu.com"; } setTimeout(time); //通过window的location和history对象来控制网页的跳转。 function click(){ window.history.forward(); } </script> </body> </html>
时间： 2024-10-11 02:14:38