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源码 ...
随机推荐
- IOS多选单选相册图片
之前做项目让实现多选相册的图片,自己写了一个demo一直保存在电脑上,今天下午发现电脑128G的容量已经快没有了,准备清理电脑,所以把之前做的一些demo放在博客上,以后方便用. 1.首先准备3个图片 ...
- 第9章 scrapy-redis分布式爬虫
9-1 分布式爬虫要点 1.分布式的优点 充分利用多机器的宽带加速爬取 充分利用多机的IP加速爬取速度 问:为什么scrapy不支持分布式? 答:在scrapy中scheduler是运行在队列的,而队 ...
- 怎么让一段xml被识别为字符串
public static String decodeString(String strData) { strData = replaceString(strData, "<" ...
- 信号量 P V测试详解
信号量 当我们编写的程序使用了线程时,不管它是运行在多用户系统上,多进程系统上,还是运行在多用户多进程系统上,我们通常会发现,程序中存在着一部分临界代码,我们需要确保只有一个进程可以进入这个临界代码并 ...
- Vue学习笔记：Ref的使用
官网上的说明 1.了解Vue中的$refs在Vue中是怎么访问到DOM元素的 <div id="app"> <h1>{{ message }}</h1 ...
- Cheatsheet: 2017 08.01 ~ 09.30
Golang Building a Worker Pool in Golang A Million WebSockets and Go Writing Plugins in Go imgproxy:R ...
- HTML网页随笔笔记
文档设置标记 1.格式标记 1.<br> 强制换行标记 让后面的文字.图片.表格等等,显示在下一行 2.<p> 换段落标记 换段落,由于多个空格和回车在HTML中会被等效为 ...
- Ubuntu16.04 安装maven
maven是个项目管理工具,在编程领域应用广泛.本文主要讲述如何在ubuntu16.04系统下安装maven. 第一步,去官网下载maven. 第二步,解压到/opt/maven目录. 创建manve ...
- css控制一个元素点击后， 改变另外一个元素的状态
1.点击后改变子元素.myclass:active span{ color:#00f;} 此方式在ios下不生效,chrome下正常 2.改变下一个兄弟元素.myclass:active +span ...
- html+css 百度首页练习
这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...