HTML5中有哪些简单实用的API？

HTML5中5个简单实用的API包括：，1. LocalStorage 存储键值对数据，浏览器关闭后数据依旧存在。，2. sessionStorage 存储会话级别的数据，页面刷新或关闭后数据丢失。，3. Geolocation API 获取用户地理位置信息。，4. Web Workers 在后台运行JavaScript代码，不影响页面性能。，5. Canvas API 提供绘制图形、动画等功能。

HTML5 提供了许多强大的 API，极大地增强了网页的功能和交互性，以下是五个简单且实用的 HTML5 API：

全屏API

功能	代码示例
进入全屏模式	``javascript const elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }``
退出全屏模式	``javascript if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }``

可见性API

功能	代码示例
判断当前页面是否被用户可见	``javascript document.addEventListener("visibilitychange", function() { console.log(document.visibilityState); });``
强制让页面始终保持活跃状态	``javascript let hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } if (typeof document.addEventListener !== "undefined" && hidden) { document.addEventListener(visibilityChange, function() { if (document[hidden]) { document.title = "Sorry, you left the page!"; } else { document.title = "Welcome back!"; } }); }``

拍照API

功能	代码示例
获取摄像头	``javascript navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { const video = document.querySelector('video'); video.srcObject = stream; });``
拍照	``javascript const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); document.getElementById('capture').addEventListener('click', function() { context.drawImage(video, 0, 0, 640, 480); });``

预加载API

功能	代码示例
预加载图片	``html ``
预加载音频	``html ``
预加载字体	``html ``

电池状态API

功能

代码示例

获取电池状态

``javascript navigator.getBattery().then(function(battery) { console.log('Battery charging:', battery.charging); console.log('Battery level:', battery.level); console.log('Battery charging time:', battery.chargingTime); console.log('Battery discharging time:', battery.dischargingTime); battery.addEventListener('chargingchange', function() { console.log('Battery charging:', battery.charging); }); });``

相关问答FAQs

1、问：如何在HTML5中使用全屏API？

答：在HTML5中，可以使用全屏API来控制网页的全屏显示，要进入全屏模式，可以调用元素的requestFullscreen方法（或其厂商特定的版本，如webkitRequestFullscreen和msRequestFullscreen），要退出全屏模式，可以调用document.exitFullscreen（或其厂商特定的版本，如document.webkitExitFullscreen和document.msExitFullscreen）。

2、问：如何使用HTML5的可见性API来判断页面是否被用户可见？

答：可见性API允许检测页面对用户的可见性，可以通过**visibilitychange事件并检查document.visibilityState的值来判断页面是否可见，当页面不可见时，document.visibilityState的值为"hidden"；当页面可见时，值为"visible"。

这些API不仅增强了网页的功能，还提升了用户体验，是现代Web开发中不可或缺的工具。