摘要:前言在日常開發(fā)中總是和各種打交道,我們名為前端工程師實(shí)為調(diào)用工程師。使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。
前言
在日常開發(fā)中總是和各種 API 打交道,我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點(diǎn)點(diǎn)的樂趣,對我來說也是一種鼓勵。
這幾個 API 使用得當(dāng)?shù)脑挘梢蕴岣吣銘?yīng)用的友好性。
這些 API 的示例代碼我已放在 github 上,感興趣的可以 clone 代碼到本地運(yùn)行。望給個 star 支持一下。
API 也可以如此有趣先看效果圖:
1. 監(jiān)聽屏幕旋轉(zhuǎn)變化接口: orientationchange定義:
這個 API 可以將你手機(jī)是否橫屏的情況暴露給需要知道的人知道。
使用:
screenOrientation: function(){ let self = this; let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation; window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { self.angle = orientation.angle; }); },
orientation.angle 值 | 屏幕方向 |
---|---|
0 | 豎屏 |
90 | 向左橫屏 |
-90/270 | 向右橫屏 |
180 | 倒屏 |
通過這個 API 我們在橫屏和豎屏的時候可以添加一些動作或者是樣式的改變。
如果只是樣式的改變也可以通過媒體查詢來監(jiān)聽:
/* 豎屏 */ @media screen and (orientation: portrait) { // some css code } /* 橫屏 */ @media screen and (orientation: landscape) { // some css code }2. 電池狀態(tài):navigator.getBattery()
定義:
這個 API 可以將你手機(jī)電池狀態(tài)的情況暴露給需要知道的人知道。
這個 api 返回的是一個 promise 對象,會給出一個 BatteryManager 對象,對象中包含了以下信息:
key | 描述 | 備注 |
---|---|---|
charging | 是否在充電 | 可讀屬性 |
chargingTime | 若在充電,還需充電時間 | 可讀屬性 |
dischargingTime | 剩余電量 | 可讀屬性 |
level | 剩余電量百分?jǐn)?shù) | 可讀屬性 |
onchargingchange | 監(jiān)聽充電狀態(tài)的改變 | 可監(jiān)聽事件 |
onchargingtimechange | 監(jiān)聽充電時間的改變 | 可監(jiān)聽事件 |
ondischargingtimechange | 監(jiān)聽電池可用時間的改變 | 可監(jiān)聽事件 |
onlevelchange | 監(jiān)聽剩余電量百分?jǐn)?shù)的改變 | 可監(jiān)聽事件 |
使用:
getBatteryInfo: function(){ let self = this; if(navigator.getBattery){ navigator.getBattery().then(function(battery) { // 判斷是否在充電 self.batteryInfo = battery.charging ? `在充電 : 剩余 ${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`; // 電池充電狀態(tài)改變事件 battery.addEventListener("chargingchange", function(){ self.batteryInfo = battery.charging ? `在充電 : 剩余 ${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`; }); }); }else{ self.batteryInfo = "不支持電池狀態(tài)接口"; } },3. 讓你的手機(jī)震動: window.navigator.vibrate(200)
定義:
這個 API 可以讓你的手機(jī)按你的想法震動。
使用:
震動效果會在很多游戲使用。比如歡樂斗地主中,地主打完王炸后手機(jī)都會有震動的效果,以此來表達(dá)地主嘚瑟的心情也很是合理。
示例代碼如下:
vibrateFun: function(){ let self = this; if( navigator.vibrate ){ navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]); }else{ self.vibrateInfo = "您的設(shè)備不支持震動"; } },4. 當(dāng)前語言:navigator.language
定義:
這個 API 可以告訴你當(dāng)前應(yīng)該使用什么語言。
如果你需要和我一樣做多語言適配,這個 API 或許可以給你提供一個不錯的思路。
使用:
不同瀏覽器返回的值稍微有點(diǎn)差異。你可以通過以下封裝好的方法來消除這種差異:
function getThisLang(){ const langList = ["cn","hk","tw","en","fr"]; const langListLen = langList.length; const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase(); for( let i = 0; i < langListLen; i++ ){ let lang = langList[i]; if(thisLang.includes(lang)){ return lang }else { return "en" } } }
不同的語言就對應(yīng)不同的語言文案就好。
5. 聯(lián)網(wǎng)狀態(tài):navigator.onLine定義:
這個 API 可以告訴讓你知道你的設(shè)備的網(wǎng)絡(luò)狀態(tài)是否連接著。
使用:
比如我上午登陸了掘金在看一篇文章,可是沒看完就到了吃飯的點(diǎn),這么熱愛學(xué)習(xí)的我肯定是選擇吃完午飯回來繼續(xù)看。
30 分鐘過后……
吃晚飯回到公司,打開電腦繼續(xù)把那篇文章看完,看完了打算點(diǎn)了贊,發(fā)現(xiàn)給了這個提示:
這個提示讓我有點(diǎn)懵(就是沒網(wǎng)絡(luò)了)。
這個時候我們就可以使用這個 API,這樣就可以準(zhǔn)確的告訴用戶“您的網(wǎng)絡(luò)無法連接,請檢查”。這樣用戶是不是可以有更好的體驗(yàn)?zāi)兀?/p>
代碼如下:
mounted(){ let self = this; window.addEventListener("online", self.updateOnlineStatus, true); window.addEventListener("offline", self.updateOnlineStatus, true); }, methods: { updateOnlineStatus: function(){ var self = this; self.onLineInfo = navigator.onLine ? "online" : "offline"; }, }
注意:navigator.onLine 只會在機(jī)器未連接到局域網(wǎng)或路由器時返回 false,其他情況下均返回 true。6. 頁面可編輯:contentEditable
也就是說,機(jī)器連接上路由器后,即使這個路由器沒聯(lián)通網(wǎng)絡(luò),navigator.onLine 仍然返回 true。
定義:
這個 API 可以使頁面所有元素成為可編輯狀態(tài),使瀏覽器變成你的編輯器。
使用:
你可以在地址欄輸入 data:text/html, , 這樣瀏覽器就變成了編輯器。
使用場景:
需求 —— 頁面需要一個文本輸入框。
該文本輸入框默認(rèn)狀態(tài)下有默認(rèn)文本提示信息
文本框輸入狀態(tài)下其高度會隨文本內(nèi)容自動撐開
像這樣的需求我們就可以使用 代替 標(biāo)簽。
不過 contentEditable="true" 是不會有 placeholder 的,那 placeholder 怎么辦呢?
我一般會使用如下方案,輸入內(nèi)容后改變 class:
// css 樣式 .haveInput:before { content: attr(placeholder); display: block; color: #333; }7. 瀏覽器活躍窗口監(jiān)聽: window.onblur & window.onfocus
定義:
這兩個 api 分別表示窗口失去焦點(diǎn)和窗口處于活躍狀態(tài)。
瀏覽其他窗口、瀏覽器最小化、點(diǎn)擊其他程序等, window.onblur 事件就會觸發(fā);
回到該窗口, window.onfocus 事件就會觸發(fā)。
使用:
上面的截圖是微信網(wǎng)頁版的消息提示。
代碼很簡單:
mounted(){ let self = this; window.addEventListener("blur", self.doFlashTitle, true); window.addEventListener("focus", function () { clearInterval(self.timer); document.title = "微信網(wǎng)頁版"; }, true); }, methods: { doFlashTitle: function(){ var self = this; self.timer = setInterval( () => { if (!self.flashFlag) { document.title = "微信網(wǎng)頁版"; } else { document.title = `微信(${self.infoNum})`; } self.flashFlag = ! self.flashFlag }, 500) }, }8. 全屏 API(Fullscreen API)
定義:
這個 API 可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。
使用:
Element.requestFullscreen() 方法用于發(fā)出異步請求使元素進(jìn)入全屏模式。
調(diào)用此 API 并不能保證元素一定能夠進(jìn)入全屏模式。如果元素被允許進(jìn)入全屏幕模式,document 對象會收到一個 fullscreenchange 事件,通知調(diào)用者當(dāng)前元素已經(jīng)進(jìn)入全屏模式。如果全屏請求不被許可,則會收到一個 fullscreenerror 事件。
當(dāng)進(jìn)入/退出全屏模式時,會觸發(fā) fullscreenchange 事件。你可以在監(jiān)聽這個事件,做你想做的事。
fullScreenFun: function(){ let self = this; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; if (fullscreenEnabled) { let de = document.documentElement; if(self.fullScreenInfo === "打開全屏"){ if( de.requestFullscreen ){ de.requestFullscreen(); }else if( de.mozRequestFullScreen ){ de.mozRequestFullScreen(); }else if( de.webkitRequestFullScreen ){ de.webkitRequestFullScreen(); } self.fullScreenInfo = "退出全屏" } else { if( document.exitFullscreen ){ document.exitFullscreen(); }else if( document.mozCancelFullScreen ){ document.mozCancelFullScreen(); }else if( document.webkitCancelFullScreen ){ document.webkitCancelFullScreen(); } self.fullScreenInfo = "打開全屏" } } else { self.fullScreenInfo = "瀏覽器當(dāng)前不能全屏"; } }
相關(guān):
document.fullscreenElement: 當(dāng)前處于全屏狀態(tài)的元素 element
document.fullscreenEnabled: 標(biāo)記 fullscreen 當(dāng)前是否可用
document.exitFullscreen(): 退出全屏
后記這篇文章很簡單。我的目的是想介紹一下有趣的 API,來提高大家對前端的一點(diǎn)興趣。
我認(rèn)為這些 API 比較有趣,若你一直疲于業(yè)務(wù),那么這些 API 或許可以給你不一樣的感受。
Vue 相關(guān)文章輸出計(jì)劃最近總有朋友問我 Vue 相關(guān)的問題,因此接下來我會輸出 9 篇 Vue 相關(guān)的文章,希望對大家有一定的幫助。我會保持在 7 到 10 天更新一篇。
【前端詞典】Vuex 注入 Vue 生命周期的過程
【前端詞典】淺析 Vue 響應(yīng)式原理
【前端詞典】新老 VNode 進(jìn)行 patch 的過程
【前端詞典】如何開發(fā)功能組件并上傳 npm
【前端詞典】從這幾個方面優(yōu)化你的 Vue 項(xiàng)目
【前端詞典】從 Vue-Router 設(shè)計(jì)講前端路由發(fā)展
【前端詞典】在項(xiàng)目中如何正確的使用 Webpack
【前端詞典】Vue 服務(wù)端渲染
【前端詞典】Axios 與 Fetch 該如何選擇
建議你關(guān)注我的公眾號,第一時間就可以接收最新的文章。
如果你想加群交流,也可以添加有點(diǎn)智能的機(jī)器人,自動拉你進(jìn)群:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104947.html
摘要:使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。如果你想加群交流,你也可以添加我的微信。前言 在日常開發(fā)中總是和各種 API 打交道,我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點(diǎn)點(diǎn)的樂趣,對我來說也是一種鼓勵。 這幾...
摘要:前言在日常開發(fā)中總是和各種打交道,我們名為前端工程師實(shí)為調(diào)用工程師。使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。 前言 在日常開發(fā)中總是和各種 API 打交道,我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點(diǎn)點(diǎn)的樂...
摘要:第一篇文章我會結(jié)合和的部分源碼,來說明注入生命周期的過程。說到源碼,其實(shí)沒有想象的那么難。但是源碼的調(diào)用樹會復(fù)雜很多。應(yīng)用的業(yè)務(wù)代碼逐漸復(fù)雜,事件事件總線等通信的方式的弊端就會愈發(fā)明顯。狀態(tài)管理是組件解耦的重要手段。前言 這篇文章是【前端詞典】系列文章的第 13 篇文章,接下的 9 篇我會圍繞著 Vue 展開,希望這 9 篇文章可以使大家加深對 Vue 的了解。當(dāng)然這些文章的前提是默認(rèn)你對 ...
摘要:使用歸類重復(fù)樣式和重復(fù)變量一樣,重復(fù)的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機(jī)號碼賬號密碼效果如下相關(guān)文章輸出計(jì)劃最近總有朋友問我相關(guān)的問題,因此接下來我會輸出篇相關(guān)的文章,希望對大家有一定的幫助。前言 在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用,覺得挺高效實(shí)用,所以也就有了這篇文章。 9 個 CSS 技巧 特此聲明,這里說的...
摘要:使用歸類重復(fù)樣式和重復(fù)變量一樣,重復(fù)的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機(jī)號碼賬號密碼效果如下相關(guān)文章輸出計(jì)劃最近總有朋友問我相關(guān)的問題,因此接下來我會輸出篇相關(guān)的文章,希望對大家有一定的幫助。前言 在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用,覺得挺高效實(shí)用,所以也就有了這篇文章。 9 個 CSS 技巧 特此聲明,這里說的...
閱讀 2294·2021-09-22 15:27
閱讀 3166·2021-09-03 10:32
閱讀 3491·2021-09-01 11:38
閱讀 2493·2019-08-30 15:56
閱讀 2206·2019-08-30 13:01
閱讀 1531·2019-08-29 12:13
閱讀 1410·2019-08-26 13:33
閱讀 885·2019-08-26 13:30