摘要:使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。如果你想加群交流,你也可以添加我的微信。
前言在日常開發(fā)中總是和各種 API 打交道,我們名為前端工程師實為 API 調(diào)用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點點的樂趣,對我來說也是一種鼓勵。
這幾個 API 使用得當?shù)脑挘梢蕴岣吣銘?yīng)用的友好性。
這些 API 的示例代碼我已放在 github 上,感興趣的可以 clone 代碼到本地運行。望給個 star 支持一下。
API 也可以如此有趣先看效果圖:
1. 監(jiān)聽屏幕旋轉(zhuǎn)變化接口: orientationchange
定義:
這個 API 可以將你手機是否橫屏的情況暴露給需要知道的人知道。
使用:
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 可以將你手機電池狀態(tài)的情況暴露給需要知道的人知道。
這個 api 返回的是一個 promise 對象,會給出一個 BatteryManager 對象,對象中包含了以下信息:
key | 描述 | 備注 |
---|---|---|
charging | 是否在充電 | 可讀屬性 |
chargingTime | 若在充電,還需充電時間 | 可讀屬性 |
dischargingTime | 剩余電量 | 可讀屬性 |
level | 剩余電量百分數(shù) | 可讀屬性 |
onchargingchange | 監(jiān)聽充電狀態(tài)的改變 | 可監(jiān)聽事件 |
onchargingtimechange | 監(jiān)聽充電時間的改變 | 可監(jiān)聽事件 |
ondischargingtimechange | 監(jiān)聽電池可用時間的改變 | 可監(jiān)聽事件 |
onlevelchange | 監(jiā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. 讓你的手機震動: window.navigator.vibrate(200)
定義:
這個 API 可以讓你的手機按你的想法震動。
使用:
震動效果會在很多游戲使用。比如歡樂斗地主中,地主打完王炸后手機都會有震動的效果,以此來表達地主嘚瑟的心情也很是合理。
示例代碼如下:
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. 當前語言:navigator.language
定義:
這個 API 可以告訴你當前應(yīng)該使用什么語言。
如果你需要和我一樣做多語言適配,這個 API 或許可以給你提供一個不錯的思路。
使用:
不同瀏覽器返回的值稍微有點差異。你可以通過以下封裝好的方法來消除這種差異:
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)是否連接著。
使用:
比如我上午登陸了掘金在看一篇文章,可是沒看完就到了吃飯的點,這么熱愛學(xué)習(xí)的我肯定是選擇吃完午飯回來繼續(xù)看。
30 分鐘過后……
吃晚飯回到公司,打開電腦繼續(xù)把那篇文章看完,看完了打算點了贊,發(fā)現(xiàn)給了這個提示:
這個提示讓我有點懵(就是沒網(wǎng)絡(luò)了)。
這個時候我們就可以使用這個 API,這樣就可以準確的告訴用戶“您的網(wǎng)絡(luò)無法連接,請檢查”。這樣用戶是不是可以有更好的體驗?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";
},
}
6. 頁面可編輯:contentEditable注意:navigator.onLine 只會在機器未連接到局域網(wǎng)或路由器時返回 false,其他情況下均返回 true。 也就是說,機器連接上路由器后,即使這個路由器沒聯(lián)通網(wǎng)絡(luò),navigator.onLine 仍然返回 true。
定義:
這個 API 可以使頁面所有元素成為可編輯狀態(tài),使瀏覽器變成你的編輯器。
使用:
你可以在地址欄輸入 data:text/html, , 這樣瀏覽器就變成了編輯器。
使用場景:
需求 —— 頁面需要一個文本輸入框。
該文本輸入框默認狀態(tài)下有默認文本提示信息
文本框輸入狀態(tài)下其高度會隨文本內(nèi)容自動撐開
像這樣的需求我們就可以使用 代替 標簽。
不過 contentEditable="true" 是不會有 placeholder 的,那 placeholder 怎么辦呢?
我一般會使用如下方案,輸入內(nèi)容后改變 class:
"haveInput" contentEditable="true" placeholder="請輸入">
// css 樣式
.haveInput:before {
content: attr(placeholder);
display: block;
color: #333;
}
7. 瀏覽器活躍窗口監(jiān)聽: window.onblur & window.onfocus
定義:
這兩個 api 分別表示窗口失去焦點和窗口處于活躍狀態(tài)。
瀏覽其他窗口、瀏覽器最小化、點擊其他程序等, 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ā)出異步請求使元素進入全屏模式。
調(diào)用此 API 并不能保證元素一定能夠進入全屏模式。如果元素被允許進入全屏幕模式,document 對象會收到一個 fullscreenchange 事件,通知調(diào)用者當前元素已經(jīng)進入全屏模式。如果全屏請求不被許可,則會收到一個 fullscreenerror 事件。
當進入/退出全屏模式時,會觸發(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 = "瀏覽器當前不能全屏";
}
}
相關(guān):
document.fullscreenElement: 當前處于全屏狀態(tài)的元素 element
document.fullscreenEnabled: 標記 fullscreen 當前是否可用
document.exitFullscreen(): 退出全屏
這篇文章很簡單。我的目的是想介紹一下有趣的 API,來提高大家對前端的一點興趣。
我認為這些 API 比較有趣,若你一直疲于業(yè)務(wù),那么這些 API 或許可以給你不一樣的感受。
Vue 相關(guān)文章輸出計劃最近總有朋友問我 Vue 相關(guān)的問題,因此接下來我會輸出 9 篇 Vue 相關(guān)的文章,希望對大家有一定的幫助。我會保持在 7 到 10 天更新一篇。
【前端詞典】Vuex 注入 Vue 生命周期的過程
【前端詞典】淺析 Vue 響應(yīng)式原理
【前端詞典】新老 VNode 進行 patch 的過程
【前端詞典】如何開發(fā)功能組件并上傳 npm
【前端詞典】從這幾個方面優(yōu)化你的 Vue 項目
【前端詞典】從 Vue-Router 設(shè)計講前端路由發(fā)展
【前端詞典】在項目中如何正確的使用 Webpack
【前端詞典】Vue 服務(wù)端渲染
【前端詞典】Axios 與 Fetch 該如何選擇
建議你關(guān)注我的公眾號,第一時間就可以接收最新的文章。
如果你想加群交流,你也可以添加我的微信 wqhhsd。
熱門文章傳送門【前端詞典】滾動穿透問題的解決方案
【前端詞典】5 種滾動吸頂實現(xiàn)方式的比較(性能升級版)
【前端詞典】提高幸福感的 9 個 CSS 技巧
【前端詞典】分享 8 個有趣且實用的 API
【前端詞典】從輸入 URL 到展現(xiàn)涉及哪些緩存環(huán)節(jié)(非常詳細)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/7242.html
摘要:前言在日常開發(fā)中總是和各種打交道,我們名為前端工程師實為調(diào)用工程師。使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。 前言 在日常開發(fā)中總是和各種 API 打交道,我們名為前端工程師實為 API 調(diào)用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點點的樂...
摘要:前言在日常開發(fā)中總是和各種打交道,我們名為前端工程師實為調(diào)用工程師。使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內(nèi)容展示在屏幕上。 前言 在日常開發(fā)中總是和各種 API 打交道,我們名為前端工程師實為 API 調(diào)用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點點的樂...
摘要:第一篇文章我會結(jié)合和的部分源碼,來說明注入生命周期的過程。說到源碼,其實沒有想象的那么難。但是源碼的調(diào)用樹會復(fù)雜很多。應(yīng)用的業(yè)務(wù)代碼逐漸復(fù)雜,事件事件總線等通信的方式的弊端就會愈發(fā)明顯。狀態(tài)管理是組件解耦的重要手段。前言 這篇文章是【前端詞典】系列文章的第 13 篇文章,接下的 9 篇我會圍繞著 Vue 展開,希望這 9 篇文章可以使大家加深對 Vue 的了解。當然這些文章的前提是默認你對 ...
摘要:使用歸類重復(fù)樣式和重復(fù)變量一樣,重復(fù)的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機號碼賬號密碼效果如下相關(guān)文章輸出計劃最近總有朋友問我相關(guān)的問題,因此接下來我會輸出篇相關(guān)的文章,希望對大家有一定的幫助。前言 在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用,覺得挺高效實用,所以也就有了這篇文章。 9 個 CSS 技巧 特此聲明,這里說的...
摘要:使用歸類重復(fù)樣式和重復(fù)變量一樣,重復(fù)的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機號碼賬號密碼效果如下相關(guān)文章輸出計劃最近總有朋友問我相關(guān)的問題,因此接下來我會輸出篇相關(guān)的文章,希望對大家有一定的幫助。前言 在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用,覺得挺高效實用,所以也就有了這篇文章。 9 個 CSS 技巧 特此聲明,這里說的...
閱讀 792·2021-09-22 16:01
閱讀 2084·2021-08-20 09:37
閱讀 1693·2019-08-30 15:54
閱讀 1689·2019-08-30 15:44
閱讀 826·2019-08-28 18:23
閱讀 3005·2019-08-26 12:17
閱讀 1005·2019-08-26 11:56
閱讀 1539·2019-08-23 16:20