Day2-Window对象

最新推荐文章于 2021-01-05 01:15:19 发布

原创最新推荐文章于 2021-01-05 01:15:19 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js基础

js基础专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解了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时，触发事件弹出警示框。