这些有趣的 API 着实有点炫
前言
在日常开发中总是和各种
API
打交道,我们名为前端工程师实为API
调用工程师。这篇文章我就分享 8 个有趣的API
,你若通过阅读这篇文章对前端增加一点点的乐趣,对我来说也是一种鼓励。
这几个 API 使用得当的话,可以提高你应用的友好性。
这些 API
的示例代码我已放在 github 上了,地址:https://github.com/wanqihua/blog。感兴趣的可以 clone 代码到本地运行。望给个 star 支持一下。
API 也可以如此有趣
先看效果图:
1. 监听屏幕旋转变化接口: 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
我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。
如果只是样式的改变也可以通过媒体查询来监听:
/* 竖屏 */
@media screen and (orientation: portrait) {// some css code
}
/* 横屏 */
@media screen and (orientation: landscape) {// some css code
}
2. 电池状态:navigator.getBattery()
定义:
这个 API
可以将你手机电池状态的情况暴露给需要知道的人知道。
这个
api
返回的是一个promise
对象,会给出一个BatteryManager
对象,对象中包含了以下信息:
key | 描述 | 备注 |
---|---|---|
charging | 是否在充电 | 可读属性 |
chargingTime | 若在充电,还需充电时间 | 可读属性 |
dischargingTime | 剩余电量 | 可读属性 |
level | 剩余电量百分数 | 可读属性 |
onchargingchange | 监听充电状态的改变 | 可监听事件 |
onchargingtimechange | 监听充电时间的改变 | 可监听事件 |
ondischargingtimechange | 监听电池可用时间的改变 | 可监听事件 |
onlevelchange | 监听剩余电量百分数的改变 | 可监听事件 |
使用:
getBatteryInfo: function(){let self = this;if(navigator.getBattery){navigator.getBattery().then(function(battery) {// 判断是否在充电self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;// 电池充电状态改变事件battery.addEventListener( chargingchange , function(){self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;});});}else{self.batteryInfo = 不支持电池状态接口 ;}
},
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 = "您的设备不支持震动";}<!--// 清除震动navigator.vibrate(0);// 持续震动setInterval(function() {navigator.vibrate(200);}, 500);-->
},
4. 当前语言:navigator.language
定义:
这个 API
可以告诉你当前应该使用什么语言。
如果你需要和我一样做多语言适配,这个 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}}
}
不同的语言就对应不同的语言文案就好。
5. 联网状态:navigator.onLine
定义:
这个 API
可以告诉让你知道你的设备的网络状态是否连接着。
使用:
比如我上午登陆了掘金在看一篇文章,可是没看完就到了吃饭的点,这么热爱学习的我肯定是选择吃完午饭回来继续看。
30 分钟过后……
吃晚饭回到公司,打开电脑继续把那篇文章看完,看完了打算点了赞,发现给了这个提示:
这个提示让我有点懵(就是没网络了)。
这个时候我们就可以使用这个 API,这样就可以准确的告诉用户“您的网络无法连接,请检查”。这样用户是不是可以有更好的体验呢?
代码如下:
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
只会在机器未连接到局域网或路由器时返回false
,其他情况下均返回true
。也就是说,机器连接上路由器后,即使这个路由器没联通网络,navigator.onLine
仍然返回true
。
6. 页面可编辑:contentEditable
定义:
这个 API
可以使页面所有元素成为可编辑状态,使浏览器变成你的编辑器。
使用:
你可以在地址栏输入
data:text/html,<html contenteditable>
, 这样浏览器就变成了编辑器。
使用场景:
需求 —— 页面需要一个文本输入框。
该文本输入框默认状态下有默认文本提示信息
文本框输入状态下其高度会随文本内容自动撑开
像这样的需求我们就可以使用 <divcontentEditable= true ></div>
代替 <textarea>
标签。
不过 contentEditable= true
是不会有 placeholder 的,那 placeholder 怎么办呢?
我一般会使用如下方案,输入内容后改变 class:
<div class= haveInput contentEditable= true placeholder= 请输入 ></div>
// css 样式
.haveInput:before {content: attr(placeholder);display: block;color: #333;
}
在你的控制台输入 document.body.contentEditable = true,你会发现页面的任何元素都是可编辑的。试试逗一逗朋友,增加些乐趣。
7. 浏览器活跃窗口监听: window.onblur & window.onfocus
定义:
这两个 api 分别表示窗口失去焦点和窗口处于活跃状态。
浏览其他窗口、浏览器最小化、点击其他程序等, window.onblur 事件就会触发;
回到该窗口, window.onfocus 事件就会触发。
使用:
上面的截图是微信网页版的消息提示。
代码很简单:
mounted(){let self = this;window.addEventListener( blur , self.doFlashTitle, true);window.addEventListener( focus , function () {clearInterval(self.timer);document.title = 微信网页版 ;}, true);
},
methods: {doFlashTitle: function(){var self = this;self.timer = setInterval( () => {if (!self.flashFlag) {document.title = "微信网页版";} else {document.title = `微信(${self.infoNum})`;}self.flashFlag = ! self.flashFlag}, 500)},
}
8. 全屏 API(Fullscreen API)
定义:
这个 API
可以使你所打开的页面全屏展示,没有其他页面外的内容展示在屏幕上。
使用:
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,document 对象会收到一个 fullscreenchange 事件,通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可,则会收到一个 fullscreenerror 事件。
当进入/退出全屏模式时,会触发 fullscreenchange 事件。你可以在监听这个事件,做你想做的事。
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 = 浏览器当前不能全屏 ;}
}
相关:
document.fullscreenElement: 当前处于全屏状态的元素 element
document.fullscreenEnabled: 标记 fullscreen 当前是否可用
document.exitFullscreen(): 退出全屏
后记
这篇文章很简单。我的目的是想介绍一下有趣的 API,来提高大家对前端的一点兴趣。
我认为这些 API 比较有趣,若你一直疲于业务,那么这些 API 或许可以给你不一样的感受。
另外,这篇文章是我半年前写的,不用惊讶。
喜欢你在看
这些有趣的 API 着实有点炫相关推荐
- 个人项目api接口_5个免费有趣的API,可用于学习个人项目等
个人项目api接口 Public APIs are awesome! 公共API很棒! There are over 50 pieces covering APIs on just the Towar ...
- 某些有趣的API接口
API简介 与因特网相连的端系统提供了一个应用程序接口(英语:Application Programming Interface,缩写:API:又称为应用程序编程接口)是软件系统不同组成部分衔接的约定 ...
- 借助Facebook、Twitter等社交平台API打造的炫酷应用
以Facebook.Twitter等为首的社交平台已成为日常生活中不可或缺的一部分.而对于开发者而言,能够借助这些功能强大的APIs或工具进行私人定制应用,无疑是最大的瑰宝.本文整理了当前6大社交平台 ...
- 18个有趣的API供你的前端开发测试之用
[提示]本文来自medium.com,访问下面提供的开放API的话,有很多你需要借助×××才可进行,但不管怎么说, Chuck Norris Facts A fan of Chuck Norris? ...
- 某些有趣的API接口(2)
API简介 与因特网相连的端系统提供了一个应用程序接口(英语:Application Programming Interface,缩写:API:又称为应用程序编程接口)是软件系统不同组成部分衔接的约定 ...
- 【前端词典】分享 8 个有趣且实用的 API
前言 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师.这篇文章我就分享 8 个有趣的 API,你若通过阅读这篇文章对前端增加一点点的乐趣,对我来说也是一种鼓励. 这 ...
- 分享 8 个有趣且实用的 API
(给前端大全加星标,提升前端技能) 作者:小生方勤 公号 / 小生方勤 (本文来自作者投稿) 前言 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师.这篇文章我就分享 ...
- 「珍藏」老司机为你推荐10个炫酷的开源库,看完的人都收藏了
前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有同学私信给我说,大佬,怎么这些效果你都能找到?你是怎么搜索的,或者有其他什么秘方?会利用 ...
- android应用 百度地图,Android学习之百度地图API的应用(一)
现在的地图API很多,我就从百度地图开始了,为了方面自己以后回顾,我会把所有学到的东西记录下来,下面是学习记录: 要使用百度地图首先得申请一个KEY,可以到这里申请(需要注册一个百度账号),申请完之后 ...
最新文章
- 道路场景语义分割算法
- Google发布“多巴胺”开源强化学习框架,三大特性全满足
- math range error
- 【Android 安装包优化】Android 中使用 7zr 可执行程序 压缩文件
- .sh文件是什么语言_FastDFS分布式文件系统的搭建安装
- 【计算机系统设计】实践笔记(3)改进数据通路:移位R型指令分析
- javamail 解码 base64 html格式邮件_python使用QQ邮箱实现自动发送邮件
- mysql5.6免安装乱码_mysql5.6乱码问题的几个注意
- 文件写入一行 、读取一行的工具类案例
- Spring揭秘 读书笔记
- 一级计算机基础试题答案,计算机一级计算机基础试题及答案
- shp在MATLAB中裁剪数据,ENVI中利用Shape文件裁剪栅格数据
- 分享一个在沪深300下获得146.56%超额收益的策略
- matlab打靶法求解薛定谔方程,用MATLAB语言解氢原子与类氢离子的定态薛定谔方程...
- EF Core 日志跟踪sql语句
- 科兴与香港大学临床试验中心研究团队和香港港怡医院合作,在中国香港启动奥密克戎特异性灭活疫苗加强剂临床试验
- html表格自动分列,CSS3 Columns分列式布局方法简介
- PS做以图片为文字背景
- 基于stm32的视觉和蓝牙控制F407芯片智能机械臂控制小车
- 金融分析与风险管理——风险价值(VaR)