您的位置：首页 > Web前端 > JavaScript

js学习--DOM操作详解大全二（window对象）

2016-03-17 12:36 711 查看
一.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 onload="invoke(changeSize,1000)">
<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 onload="invoke(changeColor,1000)">
<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 onload="showLocation();">
<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秒后跳转到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>


5.window - navigator对象　　

1､我们需要知道当前的浏览器厂商和版本信息可以用navigator对象。它有几个常用的属性。
appName:浏览器的全称。
appVersion:浏览器的版本。
userAgent:通常包含ＨＴＴＰ头部中发送的字符串，也可能包含其他细节。

2､也可以用非标准化的属性。

onLine:表示浏览器当前是否连接网络。
gelocation:用于确定用户地理位置信息,html5的属性
javaEnabled()：当浏览器运行java小程序时返回true。
cookieEnable:当浏览器可以保存cookie时返回true。

<html>
<head>
<script>
function show(){
var info = "";
info += " appName:"+window.navigator.appName+"\n";
info += " appVersion:"+window.navigator.appVersion+"\n";
info += " userAgent:"+window.navigator.userAgent+"\n";
var ele = document.getElementById("nav");
ele.innerHTML = info;
}
</script>
</head>
<body onload="show();">
<div id="nav"></div>
</body>
</html>


　　

<html>
<head>
<script>
var info = "";
function showNavigator(){
info += " online:"+window.navigator.onLine+"\n";
info += " javaEnabled:"+window.navigator.javaEnabled()+"\n";
info += " cookieEnable:"+window.navigator.cookieEnabled+"\n";
var ele = document.getElementById("nav");
ele.innerHTML = info;

}

</script>
</head>
<body onload="showNavigator();">
<div id="nav"></div>
<div id="pos"></div>
</body>
</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航