H5版的手机摇一摇

简介: 真心感觉 H5 的强大啊,也感觉到一股热潮开始翻滚起来了,最近业界关于 H5 的报道争先恐后,貌似谁还不准备好的话就铁定吃亏了似的,就好像前几年 iOS、Android 刚兴起一样,抓住了机遇学到了技术要点,对自己以后的职业生涯发展会有很不一样的结果。

真心感觉 H5 的强大啊,也感觉到一股热潮开始翻滚起来了,最近业界关于 H5 的报道争先恐后,貌似谁还不准备好的话就铁定吃亏了似的,就好像前几年 iOS、Android 刚兴起一样,抓住了机遇学到了技术要点,对自己以后的职业生涯发展会有很不一样的结果。

该功能是在 HTML5研究小组 看到的,然后自己在 iphone 上实践了下,还真是那么一回事呀。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var SHAKE_THRESHOLD = 5000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
 
function deviceMotionHandler(eventData) {
     var acceleration =eventData.accelerationIncludingGravity;
     var curTime = new Date().getTime();
     if ((curTime-last_update)> 10) {
         var diffTime = curTime -last_update;
         last_update = curTime;
         x = acceleration.x;
         y = acceleration.y;
         z = acceleration.z;
         var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
 
         if (speed > SHAKE_THRESHOLD) {
             alert( "shake!" );
         }
         last_x = x;
         last_y = y;
         last_z = z;
     }
}
if (window.DeviceMotionEvent) {
     window.addEventListener( 'devicemotion' ,deviceMotionHandler, false );
} else {
     document.getElementById( "dmEvent" ).innerHTML = "Not supported on your device."
}

shake demo

相关文章
|
8月前
|
移动开发 JavaScript
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
280 0
|
6月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
移动开发 小程序 Android开发
|
移动开发
手机端H5加载中效果demo(整理)
手机端H5加载中效果demo(整理)
|
移动开发
H5手机端常见问题汇总
H5手机端常见问题汇总
|
移动开发
手机h5页面唤起打电话、发短信功能
手机h5页面唤起打电话、发短信功能
|
移动开发
关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。
关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。
453 0
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
630 0
|
移动开发 定位技术
百度地图H5手机端自动定位并更换图标的解决方案
百度地图H5手机端自动定位并更换图标的解决方案
180 0
|
Web App开发 移动开发 Android开发
h5在手机浏览器显示正常,在iOS app内显示空白问题排查方法
h5在手机浏览器显示正常,在iOS app内显示空白问题排查方法
665 0