位置：首页-资讯-前端开发

JavaScript中window对象如何使用

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本篇内容介绍了“JavaScript中window对象如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

JavaScript中window对象如何使用

Window对象方法

alert() 弹出警告对话框
confrim() 在确认对话框显示指定的字符串
prompt() 弹出一个提示对话框
open() 打开新浏览器对话框并且显示URL或名字引用的文档，并设置创建对话框的属性
close() 关闭被引用的对话框
focus() 指定对话框放在所有浏览器最前面
blur() 指定对话框放在所有浏览器最后面
scrollTo(x,y) 把对话框滚动到指定的坐标
scrollBy(offsetx,offsety) 按照指定位移量滚动对话框
setTimeout(timer) 在指定的毫秒数过后，对传递的表达式求值
setInerval(interval) 指定周期性执行代码
moveTo(x,y) 将对话框移动到指定坐标
moveBy(offsetx,offsety) 将对话框移动到指定的位移量处
resizeTo(x,y) 设置对话框大小
resizeBy(offsetx,offsety) 按照指定的位移量设置对话框大小
print() “打印”
navigate(URL) 使用对话框显示URL指定的页面

示例如下：

1、open()

格式：window.open(URL,windowname)

URL：目标链接地址

windowname：新窗口名称

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象open方法</title>
<script>
	
</script>
</head>
<body>
	<script>
		window.open("http://www.nuc.edu.cn/");
	</script>
</body>
</html>

2、close()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象open方法</title>
<script>
	
</script>
</head>
<body>
	<input type="button" value="关闭" onclick="window.close()"/>
</body>
</html>

3、confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框。(按确认返回 true 按取消返回false)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象confirm方法</title>
<script>
	window.confirm("胡立群最帅");
</script>
</head>
<body>
	
</body>
</html>

JavaScript中window对象如何使用

4、prompt()　

显示可提示用户输入的对话框(按确认，返回输入的值)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象prompt方法</title>
<script>
	window.prompt("请输入验证码");
</script>
</head>
<body>
	
</body>
</html>

JavaScript中window对象如何使用

5、setInterval()

按照指定的周期(以毫秒计)来调用函数或计算表达式 (通俗来讲就是，设置几毫秒运行一次程序)

格式：setInterval ( ‘js代码或者函数’,执行函数或者代码的间隔时间)

<!--方法1-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象setInterval方法</title>
<script>
	setInterval('test();',1000);
	function test(){
		alert("hello world")
	}
</script>
</head>
<body>
	
</body>
</html>



<!--方法2-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象setInterval方法</title>
<script>
	setInterval('alert("hello world");',1000);
	
</script>
</head>
<body>
	
</body>
</html>

JavaScript中window对象如何使用

6、clearInterval()

setInterval则可以一直循环下去，要想停止，可用window.clearInterval( );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象setInterval方法循环取消方法--clearInterval</title>
<script>
	var 控制循环=setInterval('alert("hello world");',3000);
</script>
</head>
<body>
	<input type="button" value="停止循环" onclick="控制循环=window.clearInterval(控制循环)" >
</body>
</html>

JavaScript中window对象如何使用

7、setTimeout()

setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了

代码内嵌式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象setTimeout方法</title>
<script>
	var 控制循环=setTimeout('alert("hello world");',3000);
</script>
</head>
<body>

</body>
</html>

嵌入函数式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象setTimeout方法</title>
<script>
	var 控制循环=setTimeout('test()',3000);
	function test(){
		alert("hello world");
	}
</script>
</head>
<body>

</body>
</html>

JavaScript中window对象如何使用

8、clearTimeout()

取消由setTimeout方法设置的timeout (停止setTimeout())

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window对象setTimeout方法取消方法--clearTimeout</title>
<script>
	var 控制循环=setTimeout('test()',3000);
	function test(){
		alert("hello world");
	}
</script>
</head>
<body>
	<input type="button" value="停止循环" onclick="循环控制=window.clearTimeout(控制循环)">
</body>
</html>

JavaScript中window对象如何使用