window对象的属性
- innerHeight:返回文档的显示区高度
innerWidth:返回文档显示区的宽度
通用写法: window.document.body.clientWidth;
- outerheight:包括工具栏,菜单栏等高度
- outerwidth:包括滚动条的宽度
function init(){
var x = window.document.body.clientWidth;
var y = window.document.body.clientHeight;
}
opener,parent属性
1. opener: 代表的是父窗口.window应用opener,必须要求两个窗口有父子关系
1.超链接(设置target属性为_blank)
2.window.open()打开的窗口
2. parent: 代表的是父窗口.window
使用地方:
1. 框架中
2. 内嵌框架
3. frames[]: 拿到子窗口
- opener实例
01.html
<script type="text/javascript">
<!--
/*
window对象的属性: 1. opener: 代表的是父窗口.window
应用opener,必须要求两个窗口有父子关系
1.超链接(设置target属性为_blank)
2.window.open()打开的窗口
2. parent: 代表的是父窗口.window
使用地方:1. 框架中
2. 内嵌框架
3. frames[]: 拿到子窗口
*/
function fun(){
self.open("sub.html") ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt">
<input type="button" value="打开sub.html页面" onclick="fun()">
<a href = "sub.html" target = "_blank">打开sub.html页面</a>
</body>
sub.html
<script type="text/javascript">
<!--
//示例: 将子窗口中的文本框中的数据传递到父窗口中的文本框中显示
function fun(){
//1.拿到文本框中填写的数据
var v = document.getElementById("txt").value ;
//2.拿到父窗口对象
var w = window.opener ;
//3.拿到父窗口中的文本框对象
var txt = w.document.getElementById("txt") ;
//4.将内容赋值给父窗口中的文本框对象的value属性
txt.value = v ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt">
<input type="button" value="传递子窗口的值到父窗口中的文本框" onclick="fun()">
</body>
- parent实例
01.html
<script type="text/javascript">
<!--
function fun(){
//1.拿到文本框中填写的数据
var v = document.getElementById("txt").value ;
//2.拿到子窗口对象
var w = window.frames[0];
//3.拿到子窗口中的文本框对象
var txt = w.document.getElementById("txt") ;
//4.将内容赋值给父窗口中的文本框对象的value属性
txt.value = v ;
}
//-->
</script>
<body>
姓名:<input type="text" name="" id = "txt"><input type="button" value="传递数据到子窗口中" onclick="fun()">
<iframe src = "sub1.html"></iframe>
</body>
sub1.html
<script type="text/javascript">
<!--
function fun(){
//1.拿到文本框中填写的数据
var v = document.getElementById("txt").value ;
//2.拿到父窗口对象
var w = window.parent;
//3.拿到父窗口中的文本框对象
var txt = w.document.getElementById("txt") ;
//4.将内容赋值给父窗口中的文本框对象的value属性
txt.value = v ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt"><input type="button" value="传递数据到父窗口中" onclick="fun()">
</body>
对话框
三种对话框:
1. 消息框:alert() ;
2. 确认框: confirm() :返回Boolean类型的值
3. 输入框: prompt(): 返回输入的字符串(了解)
<script type = "text/javascript">
while(true)
{
if(confirm("你好") == false)//确认框,一定要点确认才能下一步
continue;
break;
}
var a = prompt("输入年龄:", 12);//弹出一个对话框输入信息
alert(a);
</script>
计时器
window对象的计时器:
1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表)
clearTimeout() :销毁由setTimeout()产生的计时器
2.setInterval(): 每隔一段时间调用某个函数(多次调用)
clearInterval(): 销毁由setInterval()产生的计时
<script type="text/javascript">
<!--
var t ;
var t1 ;
function fun(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
t = setTimeout("fun()",1000) ;
}
function fun1(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
}
function fun2(){
clearTimeout(t) ;
}
t1 = setInterval("fun1()",1000);
function fun3(){
clearInterval(t1) ;
}
function fun4(){
t1 = setInterval("fun1()",1000);
}
//-->
</script>
<body>
<p id = "p">10</p><br>
<input type="button" value="演示setTimeout方法" onclick="fun()">
<input type="button" value="演示clearTimeout方法" onclick="fun2()">
<input type="button" value="演示setInterval方法" onclick="fun4()">
<input type="button" value="演示clearInterval方法" onclick="fun3()">
</body>
模态窗体
window.showModelessDialog("你好");
鼠标移动事件
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red ;
}
</style>
</head>
<script type="text/javascript">
<!--
//示例:当鼠标在div上移动的时候显示鼠标的坐标
function fun(e){
var x = e.clientX;
var y = e.clientY ;
//显示在文本框中
var txt = document.getElementById("txt") ;
txt.value = x + " :" + y ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt">
<div onmousemove = "fun(event)"></div>
</body>
鼠标悬停和移除事件
<script type="text/javascript">
<!--
function fun(){
//拿到p标签对象
var p = document.getElementById("p") ;
//定义p的样式
//p.style.color = "red" ;
//p.style.border = "5px dashed green" ;
p.style.backgroundColor = "red" ;
p.className = "one" ;
}
function fun1(){
//拿到p标签对象
var p = document.getElementById("p") ;
p.className = "" ;
}
//-->
</script>
<body>
<p onmouseover = "fun()" onmouseout= "fun1()" id = "p">你好</p>
</body>