JS中BOM操作知識點
JS中BOM操作知識點
window物件
全域變數與全域方法都歸在window上
alert-comfirm-prompt
讓alert 、confirm等彈出框上的提示文字實現換行：\n
// confirm()
// 点击确定返回true，取消返回false
var btn=document.getElementById("btn");
btn.onclick=function(){ // 弹出确认对话框
var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！"); if(result){
document.getElementById("box").style.display="none";
}
} // prompt("text","defaultText")
// text：对话框中显示的纯文本
// defaultText：默认的输入文本
// 点击确认返回文本，点击取消返回null
var message=prompt("请输入您的星座","天蝎座");
console.log(message);#open-close
如果open方法中的url參數為空的話，那麼新視窗也會被開啟只是不會顯示任何文件
window.onload = function(){
// 打开子窗口，显示
newwindow.html
window.open("newwindow.html","newwindow","width=400,height=200,
left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=
no,status=no");
var quit = document.getElementById("quit");
// 点击关闭当前窗口
quit.onclick = function(){
window.close("newwindow.html");
}
}延遲呼叫setTimeout()
//调用函数
var fnCall=function(){
alert("world");
}
setTimeout(fnCall,5000); //调用匿名函数
var timeout1=setTimeout(function(){
alert("hello");
},2000)
clearTimeout(timeout1);實現以下要求：
（1） 點選「刪除」按鈕3秒後，頁面上p裡面的文字消失
（2） 點選「刪除」按鈕之後的3秒內，如果點選「取消刪除」按鈕，那麼頁面上p裡面的文字就不會被刪除
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时器</title>
<style type="text/css">
p{width:400px;height:120px;margin-top:50px;border:2px solid gray;padding:10px;}
</style>
</head>
<body>
<input type="button" value="删除">
<input type="button" value="取消删除">
<p>点击"删除"按钮后，里面的内容将在3秒钟后消失；
<br/><br/>如点击了"删除"后又不想删除内容，请在点击"删除"按钮3秒之内点击"取消删除"按钮即可</p>
<script type="text/javascript">
var btn1=document.getElementsByTagName('input')[0];
var btn2=document.getElementsByTagName('input')[1];
var p=document.getElementsByTagName('p')[0];
var timer;
btn1.onclick=function(){
timer=setTimeout(function(){
p.innerHTML='';
},3000);
}
btn2.onclick=function(){
clearTimeout(timer);
} </script>
</body>
</html>
驗證碼倒數案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var times=10;
var timer=null;
btn.onclick=function(){
if(this.getAttribute("clicked")){return false;}
var _this=this;
timer=setInterval(function(){
times--;
if(times<=0){
clearInterval(timer);
_this.value="发送验证码"; //_this.disabled=false;
_this.removeAttribute("clicked",false);
times=10;
}else{
_this.value=times+'秒后重试'; //_this.disabled=true;
_this.setAttribute("clicked",true);
}
},1000)
}
} </script>
</head>
<body>
<p class="box">
<input type="button" value="发送验证码" id="btn">
</p>
</body>
</html>
會閃爍的文字：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>闪烁的文字</title>
<style type="text/css">
p{
width:200px;
height:200px;
line-height:200px;
border:2px solid gray;
text-align:center;
color:red;
} </style>
</head>
<body>
<h3>会闪烁的文字</h3>
<p id="text"> </p>
<script type="text/javascript">
var text=document.getElementById('text');
var flag=0;
setInterval(function(){
if(flag==0){
flag=1;
text.innerHTML='☆☆☆今日特卖☆☆☆';
}else if(flag==1){
flag=0;
text.innerHTML='★★★今日特卖★★★';
}
},500); </script>
</body>
</html>
#location.href傳回目前頁面的完整URL
location.hash返回#後面的
console.log(location.href);
console.log(location.hash);
var btn=document.getElementById("btn");
btn.onclick=function(){
// 可以实现跳转
location.hash="#top";
} // 返回服务器名称和端口号
// 本地不行，要到服务器上
console.log(location.host); // 返回服务器名称
console.log(location.hostname); // 返回URL中的目录和文件名
console.log(location.pathname); // 返回URL中的查询字符串，以？开头
console.log(location.search);改變瀏覽器的位置
setTimeout(function(){ // 会在历史记录中生成新纪录
location.href='index6.html';
window.location='index6.html'; // 不会在历史记录中生成新纪录
location.replace("index6.html");
},1000)
document.getElementById("reload").onclick=function(){ // 有可能从缓存中加载 location.reload(); // 从服务器重新加载
location.reload(true);
}history保存使用者存取頁面的歷史記錄
forward 回到歷史記錄的下一步
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
// 点击btn按钮时回到历史记录的上一步，后退
btn.onclick = function() { // 方法一
history.back(); // 方法二
history.go(-1);
}
// 点击btn2按钮时回到历史记录的下一步，前进
btn2.onclick = function() { // 方法一
history.forward(); // 方法二
history.go(1);
}
btn3.onclick = function() { // 前进n步
history.go(n); // 后退n步
history.go(-n);
}screen物件
// 获取屏幕可用宽高
console.log("页面宽："+screen.availWidth);
console.log("页面高："+screen.availHeight); // 获取窗口文档显示区的宽高
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);navigator物件
//console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){ var explorer = navigator.userAgent,browser; if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
} return browser;
} var browser = getBrowser();
console.log("您当前使用的浏览器是："+browser); // 判断终端
function isPc(){ var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo); for(i=0;i<Agents.length;i++){ if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false; break;
}
} return flag;
} var isPcs = isPc();
console.log(isPcs);本文來自js教學 欄目，歡迎學習！
以上是JS中BOM操作知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
PyCharm使用教學：詳細指引你執行操作
Feb 26, 2024 pm 05:51 PM
PyCharm是一款非常受歡迎的Python整合開發環境（IDE），它提供了豐富的功能和工具，使得Python開發變得更有效率和便利。本文將為大家介紹PyCharm的基本操作方法，並提供具體的程式碼範例，幫助讀者快速入門並熟練操作工具。 1.下載安裝PyCharm首先，我們需要前往PyCharm官網（https://www.jetbrains.com/pyc
什麼是 sudo，為什麼它如此重要？
Feb 21, 2024 pm 07:01 PM
sudo（超級使用者執行）是Linux和Unix系統中的關鍵指令，允許一般使用者以root權限執行特定指令。 sudo的功能主要體現在以下幾個方面：提供權限控制：sudo透過授權使用者以臨時方式取得超級使用者權限，從而實現了對系統資源和敏感操作的嚴格控制。普通用戶只能在需要時透過sudo獲得臨時的特權，而不需要一直以超級用戶登入。提升安全性：透過使用sudo，可以避免在常規操作中使用root帳號。使用root帳戶進行所有操作可能會導致意外的系統損壞，因為任何錯誤或不小心的操作都將具有完全的權限。而
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
Linux Deploy的操作步驟及注意事項
Mar 14, 2024 pm 03:03 PM
LinuxDeploy的操作步驟及注意事項LinuxDeploy是一款強大的工具，可協助使用者在Android裝置上快速部署各種Linux發行版，讓使用者在行動裝置上體驗完整的Linux系統。本文將詳細介紹LinuxDeploy的操作步驟以及注意事項，同時提供具體的程式碼範例，幫助讀者更好地使用此工具。操作步驟：安裝LinuxDeploy：首先在
win10開機密碼忘記按F2怎麼操作
Feb 28, 2024 am 08:31 AM
想必很多的用戶家裡都有那麼幾台不用的電腦，因為長時間不用完全忘了開機密碼，於是想知道一下，忘記密碼要怎麼操作呢？那就一起來看看吧。 win10開機密碼忘記按F2怎麼操作1、按下電腦的電源鍵，然後開機時按下F2（不同電腦品牌進入bios的按鍵也不同）。 2.在bios介面中，找到security選項（不同品牌電腦的位置可能有所不同）。一般都在頂部的設定選單中。 3.然後找到SupervisorPassword選項並且點選。 4.這時候用戶就可以看到自己的密碼了，同時找到旁邊的Enabled切換為Dis
華為Mate60 Pro截圖操作步驟分享
Mar 23, 2024 am 11:15 AM
隨著智慧型手機的普及，螢幕截圖功能成為日常使用手機的必備技能之一。華為Mate60Pro作為華為公司的旗艦手機之一，其截圖功能自然也備受用戶關注。今天，我們就來分享華為Mate60Pro手機的截圖操作步驟，讓大家能夠更方便地進行截圖操作。首先，華為Mate60Pro手機提供了多種截圖方式，可以依照個人習慣選擇適合自己的方式來操作。以下詳細介紹幾種常用的截
餓了麼綁定微信怎麼操作
Apr 01, 2024 pm 03:46 PM
餓了麼這款軟體裡面匯集了各種不同的美食，大家可以在線上挑選下單，商家接單後就會立即進行製作，用戶們可以透過軟體來綁定微信，想要了解具體的操作方法的話，記得來PHP中文網看看哦。餓了麼綁定微信方法說明1、先打開餓了麼軟體，進入到首頁後我們點選右下角的【我的】;2、然後在我的頁面中我們需要點選左上角的【帳號】; 3.接著來到個人資料的頁面中我們可以綁定手機、微信、支付寶、淘寶，在這裡我們點擊【微信】;4、最後點擊過後在微信授權的頁面中選好需要綁定的微信號之後點擊【允許】即可;
js和vue的關係
Mar 11, 2024 pm 05:21 PM
js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。
