1. 窗口对象
2. 屏幕对象
3. 位置对象
4. 历史对象
5. 导航器对象
6. 弹出框
7. 定时
8. cookie
1. 窗口对象
1.点击按钮时打开一个新窗口
<!DOCTYPE html> <html> <head> <script> function openWin() { window.open("https://www.w3schools.com"); } </script> </head> <body> <form> <input type="button" value="Open Window" onclick="openWin()"> </form> </body> </html>
2.打开一个新窗口并控制其外观
<!DOCTYPE html> <html> <head> <script> function openWin() { window.open("https://www.w3schools.com","_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="Open Window" onclick="openWin()"> </form> </body> </html>
3.模糊和聚焦新窗口
<!DOCTYPE html> <html> <head> <script> var myWindow; function openWin() { myWindow = window.open("", "", "width=400, height=200"); myWindow.blur(); } function blurWin() { myWindow.blur(); } function focusWin() { myWindow.focus(); } </script> </head> <body> <input type="button" value="Open new window" onclick="openWin()"> <input type="button" value="Blur new window" onclick="blurWin()"> <input type="button" value="Focus new window" onclick="focusWin()"> </body> </html>
4.关闭新窗口
<!DOCTYPE html> <html> <head> <script> var myWindow; function openWin() { myWindow = window.open("", "", "width=400, height=200"); } function closeWin() { myWindow.close(); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> <input type="button" value="Close 'myWindow'" onclick="closeWin()" /> </body> </html>
5.检查新窗口是否已关闭
<!DOCTYPE html> <html> <head> <script> var myWindow; function openWin() { myWindow = window.open("", "", "width=400 ,height=200"); } function closeWin() { if (myWindow) { myWindow.close(); } } function checkWin() { msg = "" if (!myWindow) { msg = "was never opened"; } else { if (myWindow.closed) { msg = "is closed"; } else { msg = "is open"; } } document.getElementById("msg").innerHTML = "myWindow " + msg; } </script> </head> <body> <button onclick="openWin()">Open myWindow</button> <button onclick="closeWin()">Close myWindow</button> <button onclick="checkWin()">Is myWindow open?</button> <br><br> <div id="msg"></div> </body> </html>
6.将一些文本写入源（父）窗口
<!DOCTYPE html> <html> <head> <script> function openWin() { var myWindow = window.open("", "", "width=400, height=200"); myWindow.opener.document.getElementById("demo").innerHTML = "A new window has been opened."; } </script> </head> <body> <button onclick="openWin()">Open myWindow</button> <p id="demo"></p> </body> </html>
7.相对于当前位置移动新窗口
<!DOCTYPE html> <html> <head> <script> var myWindow; function openWin() { myWindow=window.open("", "", "width=400, height=200"); } function moveWin() { myWindow.moveBy(250, 250) } </script> </head> <body> <input type="button" value="Open myWindow" onclick="openWin()" /> <br><br> <input type="button" value="Move myWindow" onclick="moveWin()" /> </body> </html>
8.将新窗口移动到指定位置
<!DOCTYPE html> <html> <head> <script> var myWindow; function openWin() { myWindow=window.open("", "", "width=400, height=200"); } function moveWin() { myWindow.moveTo(300, 0); myWindow.focus(); } </script> </head> <body> <input type="button" value="Open myWindow" onclick="openWin()" /> <br><br> <input type="button" value="Move myWindow" onclick="moveWin()" /> </body> </html>
9.打印当前页面
<!DOCTYPE html> <html> <head> <script> function printPage() { window.print(); } </script> </head> <body> <input type="button" value="Print this page" onclick="printPage()" /> </body> </html>
10.按指定像素调整窗口大小
<!DOCTYPE html> <html> <head> <script> var w; function openwindow() { w = window.open('','', 'width=100,height=100'); w.focus(); } function myFunction() { w.resizeBy(50, 50); w.focus(); } </script> </head> <body> <button onclick="openwindow()">Create window</button> <button onclick="myFunction()">Resize window</button> </body> </html>
11.将窗口大小调整为指定大小
<!DOCTYPE html> <html> <head> <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()">Create window</button> <button onclick="myFunction()">Resize window</button> </body> </html>
12.将内容滚动到指定的像素数
<!DOCTYPE html> <html> <head> <script> function scrollWindow() { window.scrollBy(0, 10); } </script> </head> <body> <input type="button" onclick="scrollWindow()" value="Scroll" /> <h2>Reserved Words</h2> <hr> <p>You cannot use reserved words as variables, labels, or function names:</p> <hr> <br> abstract<br><br> arguments<br><br> boolean<br><br> break<br><br> byte<br><br> case<br><br> catch<br><br> char<br><br> class<br><br> const<br><br> continue<br><br> debugger<br><br> default<br><br> delete<br><br> do<br><br> double<br><br> else<br><br> enum<br><br> eval<br><br> export<br><br> extends<br><br> false<br><br> final<br><br> finally<br><br> float<br><br> for<br><br> function<br><br> goto<br><br> if<br><br> implements<br><br> import<br><br> in<br><br> instanceof<br><br> int<br><br> interface<br><br> let<br><br> long<br><br> native<br><br> new<br><br> null<br><br> package<br><br> private<br><br> protected<br><br> public<br><br> return<br><br> short<br><br> static<br><br> super<br><br> switch<br><br> synchronized<br><br> this<br><br> throw<br><br> throws<br><br> transient<br><br> true<br><br> try<br><br> typeof<br><br> var<br><br> void<br><br> volatile<br><br> while<br><br> with<br><br> yield<br><br> </body> </html>
13.滚动内容到指定的位置
<!DOCTYPE html> <html> <head> <script> function scrollWindow() { window.scrollTo(0, 100); } </script> </head> <body> <input type="button" onclick="scrollWindow()" value="Scroll" /> <h2>Reserved Words</h2> <hr> <p>You cannot use reserved words as variables, labels, or function names:</p> <hr> <br> abstract<br><br> arguments<br><br> boolean<br><br> break<br><br> byte<br><br> case<br><br> catch<br><br> char<br><br> class<br><br> const<br><br> continue<br><br> debugger<br><br> default<br><br> delete<br><br> do<br><br> double<br><br> else<br><br> enum<br><br> eval<br><br> export<br><br> extends<br><br> false<br><br> final<br><br> finally<br><br> float<br><br> for<br><br> function<br><br> goto<br><br> if<br><br> implements<br><br> import<br><br> in<br><br> instanceof<br><br> int<br><br> interface<br><br> let<br><br> long<br><br> native<br><br> new<br><br> null<br><br> package<br><br> private<br><br> protected<br><br> public<br><br> return<br><br> short<br><br> static<br><br> super<br><br> switch<br><br> synchronized<br><br> this<br><br> throw<br><br> throws<br><br> transient<br><br> true<br><br> try<br><br> typeof<br><br> var<br><br> void<br><br> volatile<br><br> while<br><br> with<br><br> yield<br><br> </body> </html>
2. 屏幕对象
1.访客屏幕：宽度
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Screen width is " + screen.width; </script> </body> </html>
2.访客屏幕：高度
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Screen height is " + screen.height; </script> </body> </html>
3.访客屏幕：可用宽度
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Available screen width is " + screen.availWidth; </script> </body> </html>
4.访客屏幕：可用高度
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Available screen height is " + screen.availHeight; </script> </body> </html>
5.访客屏幕：颜色深度
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Screen color depth is " + screen.colorDepth; </script> </body> </html>
6.访客屏幕：像素深度
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Screen pixel depth is " + screen.pixelDepth; </script> </body> </html>
3. 位置对象
1.返回当前URL的主机名和端口
<!DOCTYPE html> <html> <body> <h2>JavaScript</h2> <h3>The window.location object</h3> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Page hostname is: " + window.location.hostname; </script> </body> </html>
2.返回当前页面的整个URL
<!DOCTYPE html> <html> <body> <h2>JavaScript</h2> <h3>The window.location object</h3> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The full URL of this page is:<br>" + window.location.href; </script> </body> </html>
3.返回当前URL的路径名
<!DOCTYPE html> <html> <body> <h2>JavaScript</h2> <h3>The window.location object</h3> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Page path is: " + window.location.pathname; </script> </body> </html>
4.返回当前URL的协议部分
<!DOCTYPE html> <html> <body> <h2>JavaScript</h2> <h3>The window.location object</h3> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The page protocol is: " + window.location.protocol; </script> </body> </html>
5.加载新文档
<!DOCTYPE html> <html> <body> <h2>JavaScript</h2> <h3>The window.location object</h3> <input type="button" value="Load new document" onclick="newDoc()"> <script> function newDoc() { window.location.assign("https://www.w3schools.com") } </script> </body> </html>
6.替换当前文档
<!DOCTYPE html> <html> <body> <button onclick="window.location.replace('https://www.w3schools.com')"> Replace document</button> </body> </html>
7.打破框架
<!DOCTYPE html> <html> <head> <script> function breakout() { if (window.top != window.self) { window.top.location = "tryjs_breakout.htm"; } } </script> </head> <body> <input type="button" onclick="breakout()" value="Break out of frame!"> </body> </html>
4. 历史对象
1.显示历史列表中的URL数量
<!DOCTYPE html> <html> <body> <p>Display the number of URLs in the history list:</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = history.length; } </script> </body> </html>
2.在页面上创建后退按钮
<!DOCTYPE html> <html> <head> <script> function goBack() { window.history.back() } </script> </head> <body> <button onclick="goBack()">Go Back</button> <p>Clicking on the Back button here will not result in any action, because there is no previous URL in the history list.</p> </body> </html>
3.在页面上创建前进按钮
<!DOCTYPE html> <html> <head> <script> function goForward() { window.history.forward() } </script> </head> <body> <button onclick="goForward()">Go Forward</button> <p>Clicking on the Forward button here will not result in any action, because there is no next URL in the history list.</p> </body> </html>
4.从历史列表中加载特定的URL
<!DOCTYPE html> <html> <head> <script> function goBack() { window.history.go(-2) } </script> </head> <body> <button onclick="goBack()">Go 2 pages back</button> <p>Clicking on the "Go 2 pages back" button here will not result in any action, because there is no previous URL in the history list.</p> </body> </html>
5. 导航器对象
1.访问者的浏览器中是否启用了cookie?
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The cookieEnabled property returns true if cookies are enabled:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.cookieEnabled is " + navigator.cookieEnabled; </script> </body> </html>
2.访问者的浏览器名称是什么？
<!DOCTYPE html> <html> <body> <h2>JavaScript Navigator</h2> <p>The appCodeName property returns the code name of the browser.</p> <p>Do not rely on it! "Mozilla" is the application code name for Chrome, Firefox, IE, Safari, and Opera.</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName; </script> </body> </html>
3.访问者浏览器的引擎名称是什么？
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The product property returns the product name of the browser.</p> <p>Do not rely on it! Most browsers returns "Gecko" as product name!</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product; </script> </body> </html>
4.访问者的浏览器版本信息是什么？
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The appVersion property returns version information about the browser:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = navigator.appVersion; </script> </body> </html>
5.访问者浏览器的用户代理信息是什么？
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The userAgent property returns the user-agent header sent by the browser to the server:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = navigator.userAgent; </script> </body> </html>
6.访问者浏览器的平台是什么？
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The platform property returns the browser platform (operating system):</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.platform is " + navigator.platform; </script> </body> </html>
7.访问者浏览器的语言是什么？
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The language property returns the browser's language:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.language is " + navigator.language; </script> </body> </html>
8.访问者的浏览器中是否启动了Java?
<!DOCTYPE html> <html> <body> <h2>The Navigator Object</h2> <p>The javaEnabled() method returns true if Java is enabled:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "javaEnabled is " + navigator.javaEnabled(); </script> </body> </html>
6. 弹出框
1.显示弹出框
<!DOCTYPE html> <html> <body> <h2>JavaScript Alert</h2> <button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("I am an alert box!"); } </script> </body> </html>
2.在警告框中演示换行符
<!DOCTYPE html> <html> <body> <h2>JavaScript</h2> <p>Line-breaks in a popup box.</p> <button onclick="alert('Hello\nHow are you?')">Try it</button> </body> </html>
3.显示确认框
<!DOCTYPE html> <html> <body> <h2>JavaScript Confirm Box</h2> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var txt; if (confirm("Press a button!")) { txt = "You pressed OK!"; } else { txt = "You pressed Cancel!"; } document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
4.显示提示框
<!DOCTYPE html> <html> <body> <h2>JavaScript Prompt</h2> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { let text; let person = prompt("Please enter your name:", "Harry Potter"); if (person == null || person == "") { text = "User cancelled the prompt."; } else { text = "Hello " + person + "! How are you today?"; } document.getElementById("demo").innerHTML = text; } </script> </body> </html>
7. 定时
1.简单的计时
<!DOCTYPE html> <html> <body> <h2>JavaScript Timing</h2> <p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p> <button onclick="setTimeout(myFunction, 3000);">Try it</button> <script> function myFunction() { alert('Hello'); } </script> </body> </html>
2.另一个简单的时间
<!DOCTYPE html> <html> <body> <h2>JavaSript setTimeout()</h2> <p id="demo">I will display when two, four, and six seconds have passed.</p> <script> setTimeout(myTimeout1, 2000) setTimeout(myTimeout2, 4000) setTimeout(myTimeout3, 6000) function myTimeout1() { document.getElementById("demo").innerHTML = "2 seconds"; } function myTimeout2() { document.getElementById("demo").innerHTML = "4 seconds"; } function myTimeout3() { document.getElementById("demo").innerHTML = "6 seconds"; } </script> </body> </html>
3.无限循环中的计时事件
<!DOCTYPE html> <html> <body> <button onClick="setInterval(myCounter, 1000)">Start counter!</button> <p id="demo">Click on the button above and I will count forever.</p> <script> var c = 0; function myCounter() { document.getElementById("demo").innerHTML = ++c; } </script> </body> </html>
4.无限循环中的计时事件-带有停止按钮
<!DOCTYPE html> <html> <body> <button onClick="myTimer = setInterval(myCounter, 1000)">Start counter!</button> <p id="demo">Click on the button above and I will count forever.</p> <button onClick="clearInterval(myTimer)">Stop counter!</button> <script> var c = 0; function myCounter() { document.getElementById("demo").innerHTML = ++c; } </script> </body> </html>
5.使用计时事件创建的时钟
<!DOCTYPE html> <html> <body onload="startTime()"> <h2>JavaScript Clock</h2> <div id="txt"></div> <script> function startTime() { const today = new Date(); let h = today.getHours(); let m = today.getMinutes(); let s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('txt').innerHTML = h + ":" + m + ":" + s; setTimeout(startTime, 1000); } function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } </script> </body> </html>
6.使用setInterval()和clearInterval()设置和停止计时器
<!DOCTYPE html> <html> <body> <p id="demo">Clock</p> <button onclick="clearInterval(myTimer)">Stop</button> <script> var myTimer = setInterval(myClock, 1000); function myClock() { document.getElementById("demo").innerHTML = new Date().toLocaleTimeString(); } </script> </body> </html>
8. cookie
1.创建欢迎cookie
<!DOCTYPE html> <html> <head> <script> function setCookie(cname,cvalue,exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for(let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function checkCookie() { let user = getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user != "" && user != null) { setCookie("username", user, 30); } } } </script> </head> <body onload="checkCookie()"></body> </html>