PhoneGap模仿微信摇一摇功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var watchID = null;
document.addEventListener("deviceready", onDeviceReady, false); //deviceready
var oldValue = {
x: null,
y: null,
z: null
}
function onDeviceReady() {
startWatch();
}
function startWatch() {
var options = { frequency: 300 }; watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// 获取加速度信息成功后的回调函数
function onSuccess(newValue) {
var changes = {},
bound = 2;
if (oldValue.x !== null) {
changes.x = Math.abs(oldValue.x-newValue.x);
changes.y = Math.abs(oldValue.y-newValue.y);
changes.z = Math.abs(oldValue.z-newValue.z);
}
if ((changes.x > bound && changes.y > bound) || (changes.x > bound && changes.z >bound)|| (changes.y > bound && changes.z >bound)) {
alert('检测到手机晃动');
}
oldValue = {
x: newValue.x,
y: newValue.y,
z: newValue.z
}
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + newValue.x + '<br />' +
'Acceleration Y: ' + newValue.y + '<br />' +
'Acceleration Z: ' + newValue.z + '<br />' +
'Timestamp: ' + newValue.timestamp + '<br />';
}
// 获取加速度信息失败后的回调函数
function onError() {
alert('onError!');
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap100实战</h1>
</div>
<div data-role="content">
<div id="accelerometer">监测加速度信息中...</div>
<button onclick="stopWatch();">停止监测加速度信息</button>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
PhoneGap模仿微信摇一摇功能的更多相关文章
- C#开发微信门户及应用(38)--微信摇一摇红包功能
摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...
- C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现
”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格, ...
- IOS开发之——类似微信摇一摇的功能实现
首先,一直以为摇一摇的功能实现好高大上,结果百度了.我自己也模仿写了一个demo.主要代码如下: 新建一个项目,名字为AnimationShake. 主要代码: - (void)motionBegan ...
- Android仿iPhone晃动撤销输入功能(微信摇一摇功能)
重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...
- js微信摇一摇功能以及api
一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 玩转Android之加速度传感器的使用，模仿微信摇一摇
Android系统带的传感器有很多种,最常见的莫过于微信的摇一摇了,那么今天我们就来看看Anroid中传感器的使用,做一个类似于微信摇一摇的效果. OK ,废话不多说,我们就先来看看效果图吧: 当我摇 ...
- HTML5的DeviceOrientation实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- shake.js实现微信摇一摇功能
项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...
随机推荐
- Android中数据的保存
1. 概述 在Android中有以下几种保存数据方式: 1). 使用sharedPreference去保存:只有应用程序自己可以访问 2). 保存在应用程序私有的文件夹下:只有应用程序自己可以访问 3 ...
- linux目录（转载）
目录 1.树状目录结构图 2./目录 3./etc/目录 4./usr/目录 5./var/目录 6./proc/目录 7./dev/目录 该文章主要来自于网络进行整理. 目录结构参考地址: http ...
- shortcut icon和icon代码的区别介绍
语句一: <link rel="shortcut icon" href="favicon.ico" /> 语句二: <link rel=&qu ...
- redis的默认配置文件redis.conf详解
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...
- 最大子序列和问题--时间复杂度O（NlogN)
最大子序列和问题--时间复杂度O(NlogN) package a; /* * 最大子序列和问题,时间复杂度O(NlogN) */ public class Sequence { private st ...
- jdk锁相关
锁类型 可重入锁:在执行对象中所有同步方法不用再次获得锁 可中断锁:在等待获取锁过程中可中断 公平锁: 按等待获取锁的线程的等待时间进行获取,等待时间长的具有优先获取锁权利 读写锁:对资源读取和写入的 ...
- antd-mobile的按需加载
"babel": { "presets": [ "react-app" ] } 主要问题是 依赖项的版本问题 以及 配置问题 新添加的con ...
- 《Linux命令行与Shell脚本编程大全第2版》读书笔记
公司说不准用云笔记了,吓得我赶紧把笔记贴到博客上先..... 近3年前的了,只有一半的章节,后面的没空记录了.... 第1章 可以cat /proc/meminfo文件来观察Linux系统上虚拟内存的 ...
- Cloudera Manager5安装总结遇到问题及解决办法 CDH 5.8 on CentOS 7
问题导读:1.Cloudera Manager在线安装你认为有什么优点和缺点?2.Cloudera Manager安装过程中遇到,你认为该如何解决?3.在线安装addr.arpa domain nam ...
- 01_Netty简述
[Netty的NIO模型与常见的NIO模型对比] [原始的BIO模型] ServerSocket serverSocket = Socket clientSocket = serverSocket.a ...