Day2-Window对象
window对象的常用属性
screen:有关客户端的屏幕和显示性能的信息。
history:有关客户访问过的url的信息
location:有关当前url的信息
window对象的常用方法
prompt:现实可提示用户输入的对话框
例:prompt("你是大猪蹄子吗?","是的");
效果:
其输入框内容可通过声明变量接收。
var tip = prompt("你是大猪蹄子吗?","是的");
document.write(tip);
tip为文本框输入内容。
alert:显示带有一个提示信息和一个确定按钮的警示框
例:alert("男人都是大猪蹄子!!!");
效果:
alert中的内容可以是变量,也可以是常量
confirm:显示一个带有提示信息、确定和取消按钮的对话框
例:confirm("你确定你是大猪蹄子吗?");
效果:
当点击“确定”时,返回Ture值,当点击“取消”时,返回False。
var bool = confirm("你确定你是大猪蹄子吗?");
close:关闭当前页面
close();
可直接定义,关闭当前页面。加在JS中可能会被浏览器拦截;
open:打开一个页面
open("要打开的url地址","网页名称","窗口特征")
open("https://www.baidu.com/","百度","width=500,height=100");
可直接定义。打开一个新的页面。
setTimeout:在指定毫秒后调用函数或计算表达式
例:setTimeout(close,5000); //在5000毫秒(即5秒)后,执行close方法
setInterval:按照指定的周期(以毫秒计)来调用函数或表达式
例:
setInterval(function(){
if(count == 0){
document.write("再见了,大猪蹄子!!!");
}else{
document.write("<br />"+count+"秒后自动关闭<br />");
count--;
}
},1000); //每隔1000毫秒(即1秒)执行一次function
clearInterval(定时器):清除已定义的定时器
例:
var time = setInterval(open(),1000);
clearInterval(time); //清除上面定义的time定时器
window对象的常用事件
onload: 当页面加载到onload时,执行一个方法
例:
JS代码
function load(){
alert("这可能是个广告,也有可能不是~");
}
HTML代码
<body onload="load()">
</body>
当页面加载完成,则执行load()方法中的alert()方法。
效果:
onClick:鼠标点击事件
当鼠标点击某个元素时,触发事件
HTML代码
<input type="button" value="点击" onClick="click()" />
js代码
function click(){
alert("点击提示");
}
onmouseover:当鼠标移到某元素上触发事件
onmouseout:当鼠标移出某元素触发事件
onmouserdown:当鼠标按下时触发事件
onmouseup:当鼠标松开时出发事件
例:
js代码
function changes(x){
var d = document.getElementById("d");
switch(x){
case 1:
d.style.backgroundColor = "red";
break;
case 2:
d.style.backgroundColor = "yellow";
break;
case 3:
d.style.backgroundColor = "blue";
break;
case 4:
d.style.backgroundColor = "green";
break;
}
}
HTML代码
<div id="d" style="width:100px;height:100px;border:1px solid #000;" onmousemove="changes(1)" onmouseout="changes(2)" onmousedown="changes(3)" onmouseup="changes(4)">
</div>
效果一览:
移入(红色) 移出(黄色) 按住(蓝色) 松开(绿色)
onmousemove:鼠标在某元素内移动,则触发事件
与onmouseover的区别:onmouseover是在移入时只会触发一次,而onmousemove会在元素内移动触发多次;
js代码
var count = 0;
function move(){
var move = document.getElementById("move");
move.value = count++;
}
function over(){
var over = document.getElementById("over");
over.value = count++;
}
HTML代码
<div style="width:300px;height:100px;border:1px solid red;" onmousemove="move()">
move:<input id="move" type="text"/>
</div>
<div style="width:300px;height:100px;border:1px solid red;" onmouseover="over()">
over:<input id="over" type="text"/>
</div>
效果:
在上面的红框中移动,数字会自增;
在下面的红框中,必须要将鼠标移出红框范围,在移入红框范围,才会自增;
onmouseenter:鼠标在移入某一元素,则触发事件
onmouseleave:鼠标在移出某一元素,则触发事件
用法和onmouseover和onmouseout一致
区别:
onmouseover和onmouseout作为父元素的事件,会传递给子元素;
onmouseenter和onmouseleave作为父元素的事件,不会传递给子元素;
例:
JS代码
function enter(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "enter";
}
function leave(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "leave";
}
function eover(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "eover";
}
function eout(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "eout";
}
HTML代码
<input type="text" id="onmouse">
<div onmouseenter="enter()" onmouseleave="leave()" style="outline:1px solid red;width:200px;height:200px;">
<div onmouseover="eover()" onmouseout="eout()" style="outline:1px solid red;width:100px;height:100px;">
</div>
</div>
HTML代码
<input type="text" id="onmouse">
<div onmouseover="eover()" onmouseout="eout()" style="outline:1px solid red;width:200px;height:200px;">
<div onmouseenter="enter()" onmouseleave="leave()" style="outline:1px solid red;width:100px;height:100px;">
</div>
</div>
效果:太难截图了。不截了。
onkeydown:当键盘按键按下时触发事件
JS代码
function keyDown(){
alert("已按");
}
HTML代码
<input onkeydown="keyDown()" type="text" name = "username" />
效果:
当在输入框中按下键盘上的任意键,触发事件弹出警示框。
onchange:域的内容被改变
当元素的作用域的内容发生改变时,触发事件
JS代码
function Change(){
alert("值发生了改变");
}
HTML代码
<input onchange="Change()" type="text" name = "username" />
效果:
当q变成q2时,触发事件弹出警示框。