當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS学习记录(BOM部分)
生活随笔
收集整理的這篇文章主要介紹了
JS学习记录(BOM部分)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
?
?BOOM部分
?
Screen<html lang="en"> <head><meta charset="UTF-8"><title>Screen</title> </head> <body></body> <script>console.log(screen.width);console.log(screen.height);console.log(screen.availWidth);console.log(screen.availHeight);</script> </html>
結果圖:
?
Location<html lang="en"> <head><meta charset="UTF-8"><title>Location</title> </head> <body> <button οnclick="assign()">加載新頁面</button> <button οnclick="replace()">替換頁面</button> <button οnclick="reload1()">刷新當前頁面</button> <button οnclick="reload2()">徹底刷新當前頁面</button> </body> <script>function assign() {/*可以返回老頁面*/location.assign("http://www.baidu.com");}function replace() {/*不能返回老頁面*/location.replace("http://www.baidu.com");}function reload1() {location.reload();}function reload2() {location.reload(true);}</script> <!--<script>console.log(location.href);/*完整的url*/console.log(location.protocol);/*協議*/console.log(location.port);/*端口號*/console.log(location.hostname);/*主機名稱*/console.log(location.pathname);/*路徑名稱*/console.log(location.search);/*?后的數據部分*/ </script>--> </html>
結果圖:
History對象
<html lang="en"> <head><meta charset="UTF-8"><title>History對象</title> </head> <body> <a href="Demo40.html">Demo40</a><button οnclick="forward()">下一個頁面</button> </body> <script src="../../js/history.js"></script> </html>
結果圖:
?
?
Navigator對象<html lang="en"> <head><meta charset="UTF-8"><title>Navigator</title> </head> <body></body> <script>console.log(navigator.appName);console.log(navigator.appVersion);console.log(navigator.userAgent);console.log(navigator.platform); </script> </html>
?
?
定時器<html lang="en"> <head><meta charset="UTF-8"><title>定時器</title> </head> <body> <button οnclick="show()">五秒后顯示HelloWord</button> <button οnclick="cancelShow()">取消顯示HelloWord</button> <button οnclick="cancelShow2()">停止顯示HelloWord</button> </body> <script>// setTimeout 默認情況下,只會執行一次。var hello;function show() {hello = setTimeout(function () {alert("HelloWord!");}, 500);}function cancelShow() {clearTimeout(hello);} </script> <!--<script>// setInterval 根據指定的時間,循環執行。var hello2 = setInterval(function () {console.log("HelloWord!"); }, 1000); function cancelShow2() { clearTimeout(hello2); } </script>--> </html>
?
結果圖:
confirm(對話框中顯示的純文本)
<html lang="en"> <head><meta charset="UTF-8"><title>confirm(對話框中顯示的純文本)</title> </head> <body></body> <script>var flag=confirm("確認樣刪除此信息嗎?");if(flag){alert("刪除成功");}else {alert("你取消了刪除");}/*注意confirm與prompt和alert的區別*/ </script> </html>
結果圖:
?
轉載于:https://www.cnblogs.com/lizuowei/p/7282678.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的JS学习记录(BOM部分)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: form表单多文件上传
- 下一篇: HenCoder UI 部分 2-1 布