JavaScript Window 对象实例集合

这篇文章展示了JavaScript中Window对象的一些基本操作,包括弹出警告框、带折行的警告、确认框、提示框,以及如何打开新窗口、控制窗口外观、关闭窗口、检查窗口状态、移动和调整窗口大小、打印页面等。通过示例代码详细说明了各种功能的实现方法。
摘要由CSDN通过智能技术生成


JavaScript Window 对象实例集合

在这里插入图片描述

注:了解JavaScript Window 对象请参考《JavaScript Window》

弹出一个警告框

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function scrollWindow(){
	window.scrollBy(100,100);
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
  • 运行效果
    在这里插入图片描述

弹出一个带折行的警告框

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p>点击按钮在弹窗总使用换行。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	alert("Hello\nHow are you?");
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

弹出一个确认框,并提醒访客点击的内容

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p>点击按钮,显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了'确定'按钮!";
	}
	else{
		x="你按下了'取消'按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

弹出一个提示框

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

点击一个按钮时,打开一个新窗口

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function open_win() {
	window.open("http://www.");
}
</script>
</head>
<body>
<form>
<input type="button" value="打开窗口" onclick="open_win()">
</form>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

打开一个新窗口,并控制其外观

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function open_win(){
	window.open("http://www.csdn.net","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>
</head>
<body>
<form>
<input type="button" value="打开窗口" onclick="open_win()">
</form>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

打开多个新窗口

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function open_win() {
	window.open("https://www.microsoft.com/");
	window.open("https://www.csdn.net/");
}
</script>
</head>
<body>
<form>
<input type="button" value="打开窗口" onclick="open_win()">
</form>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

确保新的窗口没有获得焦点

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是 “我的窗口”</p>");
	myWindow.blur();
}
</script>
</head>
<body>

<input type="button" value="打开窗口" onclick="openWin()" />

</body>
</html>
  • 运行效果
    在这里插入图片描述

在这里插入图片描述

确保新的窗口获得焦点

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是'我的窗口'</p>");
	myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="打开窗口" onclick="openWin()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

关闭新窗口

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function openWin(){
	myWindow=window.open("","","width=200,height=100");
	myWindow.document.write("<p>这是'我的窗口'</p>");
}
function closeWin(){
	myWindow.close();
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

检查新的窗口是否已关闭

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
var myWindow;
function openWin(){
	myWindow=window.open("","","width=400,height=200");
}
function closeWin(){
	if (myWindow){
		myWindow.close();
	}
}
function checkWin(){
	if (!myWindow){
		document.getElementById("msg").innerHTML="我的窗口没有被打开!";
	}
	else{
		if (myWindow.closed){
			document.getElementById("msg").innerHTML="我的窗口被关闭!";
		}
		else{
			document.getElementById("msg").innerHTML="我的窗口没有被关闭!";
		}
	}	
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
<br><br>
<input type="button" value="我的窗口被关闭了吗?" onclick="checkWin()" />
<br><br>
<div id="msg"></div>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

返回新窗口的名字

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
var myWindow;
function openWin(){
	myWindow=window.open('','MsgWindow','width=200,height=100');
	myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>");
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

传输一些文本到源(父)窗口

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
	myWindow.focus();
	myWindow.opener.document.write("<p>这个是源窗口!</p>");
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

相对于当前位置移动新窗口

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
}
function moveWin(){
	myWindow.moveBy(250,250);
	myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
<br><br>
<input type="button" value="移动我的窗口" onclick="moveWin()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

移动新窗口到指定位置

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
}
function moveWin(){
	myWindow.moveTo(0,0);
	myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="打开窗口" onclick="openWin()" />
<br><br>
<input type="button" value="移动窗口" onclick="moveWin()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

打印当前页面

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function printpage(){
	window.print();
}
</script>
</head>
<body>
<input type="button" value="打印此页面" onclick="printpage()" />
</body>
</html>
  • 运行效果
    在这里插入图片描述

在这里插入图片描述

指定窗口大小

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
var w;
function openwindow(){
	w=window.open('','', 'width=100,height=100');
	w.focus();
}
function myFunction(){
	w.resizeTo(500,500);
	w.focus();
}
</script>
</head>
<body>
<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

由指定的像素数滚动内容

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function scrollWindow(){
	window.scrollBy(100,100);
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
  • 运行效果
    在这里插入图片描述

滚动到指定内容处

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
function scrollWindow(){
	window.scrollTo(100,500);
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
  • 运行效果
    在这里插入图片描述

一个简单的时钟

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<head>
<script>
function timedText(){
	var x=document.getElementById('txt');
	var t1=setTimeout(function(){x.value="2 seconds"},2000);
	var t2=setTimeout(function(){x.value="4 seconds"},4000);
	var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮,输出的文本将告诉你2秒,4秒,6秒已经过去了。</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述

用setTimeout() 和 clearTimeout()设置和停止定时器

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
	if (!timer_is_on){
		timer_is_on=1;
		timedCount();
	}
}
function stopCount(){
	clearTimeout(t);
	timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮,按下时开始计数,输入框将从0开始一直计数。单击停止计数按钮,按下时停止计数,再次点击开始计数按钮,又再次开始计数。
</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述

用setInterval() 和 clearInterval()设置和停止定时器

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("clock").value=t;
}
</script>
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>
  • 运行效果
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁辰兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值