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>
- 运行效果