HTML5新API实例

Fighting_No1

已于 2023-05-01 16:51:43 修改

阅读量780

点赞数

分类专栏： web前端文章标签： html5 api

于 2018-04-21 12:19:33 首次发布

本文链接：https://blog.csdn.net/Fighting_No1/article/details/80028078

版权

web前端专栏收录该内容

45 篇文章 3 订阅

订阅专栏

HTML5新API实例

参考资料：

注意，个别API要引入jQuery，并且要查看浏览器是否支持这些新API。

visibilityState

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visibilityState</title>
<script src="../lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h4>visibilityState</h4>
<p>
这是一个HTML5新提供的一个api，主要作用就是记录当前标签页在浏览器中的激活状态。
所谓“激活状态”指的是当前标签是否正在被用户浏览。
</p>
<h4>应用场景</h4>
<p>
监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、
开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，
以及到达更好的播放效果。
</p>

<video id="video1" width="420" controls>
<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
<source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<script>
var myVideo = document.getElementById("video1");
myVideo.play();
document.addEventListener("visibilitychange", function () {
if (document.visibilityState == "visible") {
//do something
//继续视频播放
myVideo.play();
}
if (document.visibilityState == "hidden") {
//do something else
//暂停视频播放
myVideo.pause();
}
});

</script>
</body>
</html>

在线离线事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线和离线事件</title>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<style>
#status {
position: fixed;
width: 100%;
font: bold 1em sans-serif;
color: #FFF;
padding: 0.5em;
}

#log {
padding: 2.5em 0.5em 0.5em;
font: 1em sans-serif;
}

.online {
background: green;
}

.offline {
background: red;
}
</style>
</head>
<body>
<div id="status"></div>
<div id="log"></div>
<p>试试断开网络后重新连接</p>
<script>
window.addEventListener('load', function() {
var status = document.getElementById("status");
var log = document.getElementById("log");

function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";

status.className = condition;
status.innerHTML = condition.toUpperCase();

log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
}

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
</script>
</body>
</html>

Geolocation

Geolocation API 在浏览器中的实现是 navigator.geolocation 对象，这个对象包含 3 个方法。

getCurrentPosition(successCallback[, failCallback, options])

调用这个方法会触发请求用户共享地理定位信息的对话框。

navigator.geolocation.getCurrentPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
}, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 25000
});

这个方法接收 3 个参数：成功回调函数、可选的失败回调函数和可选的选项对象。

(1) 成功回调函数会接收到一个Position 对象参数，该对象有两个属性：coords 和timestamp。

coords 对象中将包含下列与位置相关的信息:

latitude：以十进制度数表示的纬度。
longitude：以十进制度数表示的经度。
accuracy：经、纬度坐标的精度，以米为单位。

有些浏览器还可能会在 coords 对象中提供如下属性：

altitude：以米为单位的海拔高度，如果没有相关数据则值为 null。
altitudeAccuracy：海拔高度的精度，以米为单位，数值越大越不精确。
heading：指南针的方向，0°表示正北，值为 NaN 表示没有检测到数据。
speed：速度，即每秒移动多少米，如果没有相关数据则值为 null。

(2) 失败回调函数也会接收到一个参数。这个参数是一个对象，包含两个属性：message 和 code。其中，message 属性中保存着给人看的文本消息，解释为什么会出错，而 code 属性中保存着一个数值，表示错误的类型：

用户拒绝共享（1）
位置无效（2）
超时（3）

(3) getCurrentPosition() 的第三个参数是一个选项对象，用于设定信息的类型。可以设置的选项有三个：

enableHighAccuracy 是一个布尔值，表示必须尽可能使用最准确的位置信息；
timeout 是以毫秒数表示的等待位置信息的最长时间；
maximumAge 表示上一次取得的坐标信息的有效时间，以毫秒表示，如果时间到则重新取得新坐标信息。

这三个选项都是可选的，可以单独设置，也可以与其他选项一起设置。除非确实需要非常精确的信息，否则建议保持 enableHighAccuracy 的 false 值（默认值）。将这个选项设置为 true 需要更长的时候，而且在移动设备上还会导致消耗更多电量。

类似地，如果不需要频繁更新用户的位置信息，那么可以将 maximumAge 设置为 Infinity，从而始终都使用上一次的坐标信息。

watchPosition(successCallback[, failCallback, options])和clearWatch(id)

如果你希望跟踪用户的位置，那么可以使用另一个方法 watchPosition()。这个方法接收的参数与 getCurrentPosition() 方法完全相同。

实际上， watchPosition() 与定时调用 getCurrentPosition() 的效果相同。在第一次调用 watchPosition() 方法后，会取得当前位置，执行成功回调或者错误回调。然后，watchPosition() 就地等待系统发出位置已改变的信号（它不会自己轮询位置）。

调用 watchPosition() 会返回一个数值标识符，用于跟踪监控的操作。基于这个返回值可以取消监控操作，只要将其传递给 clearWatch() 方法即可（与使用 setTimeout() 和 clearTimeout() 类似）。

var watchId = navigator.geolocation.watchPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
});

clearWatch(watchId);

requestAnimationFrame （请求动画关键帧）

在 JavaScript 中创建动画的典型方式，就是使用 setInterval() 方法来控制所有动画。以下是一个使用 setInterval() 的基本动画循环：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setInterval()实现位移</title>
    <style>
      .demo {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="demo"></div>
    <script>
      var dom = document.getElementsByClassName("demo")[0];
      items = setInterval(function (e) {
        dom.style.left = dom.offsetLeft + 50 + "px";
        if (dom.offsetLeft == 500) {
          clearInterval(items);
        }
      }, 10);
    </script>
  </body>
</html>

但是，JS定时器会有一个缺点：浏览器是每1s重绘60次，所以大约为16ms重绘一次。如果我们像上面执行的一样，每隔10ms就增加 left 50px，页面就会造成关键帧丢失。

使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setInterval()实现位移</title>
    <style>
      .demo {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="demo"></div>
    <script>
        var dom = document.getElementsByClassName('demo')[0];
        function move() {
            dom.style.left = dom.offsetLeft + 50 + 'px';
            var items = requestAnimationFrame(move);
            if(dom.offsetLeft == 500){
                cancelAnimationFrame(items);
            }
        }
        move();
    </script>
  </body>
</html>

下面方法实现了API浏览器兼容性，并大概计算重绘间隔时间：

(function(){
    function draw(timestamp){
        // 计算两次重绘的时间间隔
        var drawStart = (timestamp || Date.now()),
            diff = drawStart - startTime;

        // 使用 diff 确定下一步的绘制时间

        // 把 startTime 重写为这一次的绘制时间
        startTime = drawStart;

        // 重绘 UI
        requestAnimationFrame(draw);
    }

    var requestAnimationFrame = window.requestAnimationFrame ||
                                window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame ||
                                window.msRequestAnimationFrame,
        startTime = window.mozAnimationStartTime || Date.now();

    requestAnimationFrame(draw);
})();

Fighting_No1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5新API实例

HTML5新API实例注意，要引入jQuery，并且要查看浏览器是否支持这些新API。visibilityState&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;visibilityState&lt;/title&
复制链接

扫一扫

专栏目录