Day2-Window对象

本文深入讲解了JavaScript中Window对象的属性和方法,包括screen、history、location等信息,以及prompt、alert、confirm等对话框的使用。同时,探讨了定时器、页面加载事件和鼠标、键盘事件的处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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时,触发事件弹出警示框。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值