html 游戏 调用震动,html5消息和震动api

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

在html5中提供了越来越多的API，一些是专门针对移动端的，比如手机的倾斜和旋转、还有桌面提示和机体震动。这些功能都和我们日常使用手机息息相关，移动端页面开发中我们可以把它们作为一种通知用户的形式。本文就来说下这两个API。

桌面提示—Notification

首先，我们要知道什么是桌面提示。或许你在浏览网页时经常会发现网页底部弹出一些消息框，这些只能是针对某个网页的消息弹框，假设我们在浏览其他网页，或最小化浏览器则看不到这个消息框。

而html5里面notification是桌面提示，它是针对桌面的，它不受你在浏览某个网页，或者浏览器处于最小化状态的限制，所以只要某个页面有Notification事件发生，则会在桌面右下角显示桌面提示弹框。而在手机端，这个以浏览器消息推送的形式展现。是不是非常cool？

要做到桌面提示，需要注意的是，首先你的浏览器需要支持Notification api ，然后必须得到用户允许通知后(这个和获取地理位置信息类似)，即你要检测浏览器权限(PC端不受限制，手机端则需要)才能推送桌面提示，最后就是创建消息了，再发送消息。值得一提的是，桌面提示的功能必须在服务器环境下才能使用。

接下来，我们就逐步来完成一个桌面提示的功能。

第一步：window.webkitNotifications。判断是否支持桌面提醒：if(window.webkitNotifications){

}

else{

// 不支持桌面提醒

}

第二步：window.webkitNotifications。检测通知权限，这里用到window.webkitNotifications对象，它有两个方法如下：window.webkitNotifications.requestPermission(callback);

requestPermission方法的作用是去请求用户是否允许桌面提示，它有一个回调函数，即获得用户允许或不允许后进行的后续操作。window.webkitNotifications.checkPermission();

checkPermission方法是用来判断用户允许与否得到的值，它的值有三个，即0,1,2。其中0表示允许，而1和2则表示不允许。通常，我们都是判断checkPermission的值是否为0再去执行后续创建消息的操作。

第三步：window.webkitNotifications.createNotification。创建提示消息，这个方法的使用如下，它有三个参数，分别是提示消息图标的url，提示消息的标题以及提示消息的主体内容：window.webkitNotifications.createNotification(iconURL, title, body);

当我们创建完消息后，就应该让消息显示，这里也有现成的方法：var desktopTips = window.webkitNotifications.createNotification(iconURL, title, body);

desktopTips.show();

除了show以外，桌面提示还有以下两种关闭方法：desktopTips.close();

//或

desktopTips.cancel();

另外，在触发这些方法的时候，也有一些对应的触发事件，详见表格：事件属性事件描述onshow当消息框显示的时候触发该事件

onclick当点击消息框的时候触发该事件

onclose当消息关闭的时候触发该事件

onerror当出现错误的时候触发该事件

你可点此处查看：桌面提示demo

机体震动—Vibration

设置震动

使用震动前，我们需要判断浏览器是否支持它，若浏览器不支持Vibration API，则会静默的失败：if("vibrate" in navigator){

…

}

以下两种方式都是设置手机震动1s(就如一次性调用):navigator.vibrate(1000);

//或

navigator.vibrate([1000]);

你也可以间歇性调用震动功能，比如:navigator.vibrate([1000, 2000, 5000]);

就是手机震动1s，接着暂停2s，然后再震动5s。你也可以根据需要加入更多的时间段。

清除震动

如果手机正处于震动中，你可以将vibrate的参数设置为0，它的作用是立即清除震动功能：navigator.vibrate(0);

或许你还知道有另外一种清除震动的方法：navigator.vibrate([]);

但经过我的测试，好像某些浏览器(像UC)不能通过此种方式清除震动。因此为了更好的兼容性，我还是推荐你全部使用 navigator.vibrate(0)

最后，来看看这个关于 机体震动demo。