未能在 phonegap 中使用带有 HTML 和 JavaScript 的加速度计
Failure to use accelerometer with HTML and JavaScript in the phonegap
我想知道为什么我正在做的应用程序会出错?当我摇手机时,他没有开始玩。http://software.intel.com/pt-br/articles/create-handbell-using-html5-and-phonegap,我按照这个网站上的说明进行操作,但我不太明白它是如何工作的。这是代码:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>BellShapes</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
// Aguardar o carregamento do Cordova
document.addEventListener("deviceready", onDeviceReady, false);
// inicialização
bellrightring = document.getElementById("bellrightring");
bellleftring = document.getElementById("bellleftring");
bellleft = document.getElementById("bellleft");
bellright = document.getElementById("bellright");
bellcenter = document.getElementById("bellcenter");
// inicialização da mídia
bellsound = new Media("/android_asset/www/resources/bell.mp3",
onRingSuccess(bellsound), onRingError);
bellend = new Media("/android_asset/www/resources/bell-end.mp3",
onRingSuccess(bellend), onRingError);
}
function sign(val, delta) {
if (typeof delta == undefined) delta=0
if (val > 0 && Math.abs(val)-delta > 0) return 1;
else if (val<0 && Math.abs(val)-delta > 0) return -1;
else return 0;
}
function isShaking(last, current, threshold) {
var deltaX = Math.abs(last.x - current.x),
deltaY = Math.abs(last.y - current.y),
deltaZ = Math.abs(last.z - current.z);
return ((deltaX > threshold && deltaY > threshold) ||
(deltaX > threshold && deltaZ > threshold) ||
(deltaY > threshold && deltaZ > threshold) || deltaX > threshold);
}
accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
function onSuccess(acceleration) {
var x = acceleration.x;
var y = acceleration.y;
var z = acceleration.z;
var t = false;
if (previous){
if (isShaking(previous, acceleration, 10)){
moveBell(sign(x));
bellsound.play();
accelerated = true;
}
else {
stopBell(acceleration);
if (accelerated == true){
bellend.play();
}
accelerated = false;
}
}
previous = acceleration;
}
</script>
</head>
<body id="onLoad">
<div id="handbell">
<div id="bellcenter" class="position"></div>
<div id="bellright" class="position"></div>
<div id="bellleft" class="position"></div>
<div id="bellrightring" class="ring"></div>
<div id="bellleftring" class="ring"></div>
</div>
我对javascript了解不多,所以如果你能用更简单的方式解释,我将不胜感激。
我更新了代码,如果您看到错误,请告诉我!非常感谢!
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>BellShapes</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError);
bellrightring = document.getElementById("bellrightring");
bellleftring = document.getElementById("bellleftring");
bellleft = document.getElementById("bellleft");
bellright = document.getElementById("bellright");
bellcenter = document.getElementById("bellcenter");
bellsound = new Media("/android_asset/www/resources/bell.mp3",
onRingSuccess(bellsound, onRingError);
bellend = new Media("/android_asset/www/resources/bell-end.mp3",
onRingSuccess(bellend, onRingError);
}
function sign(val, delta) {
if (typeof delta == undefined) delta=0
if (val > 0 && Math.abs(val)-delta > 0) return 1;
else if (val<0 && Math.abs(val)-delta > 0) return -1;
else return 0;
}
function isShaking(last, current, threshold) {
var deltaX = Math.abs(last.x - current.x),
deltaY = Math.abs(last.y - current.y),
deltaZ = Math.abs(last.z - current.z);
return ((deltaX > threshold && deltaY > threshold) ||
(deltaX > threshold && deltaZ > threshold) ||
(deltaY > threshold && deltaZ > threshold) || deltaX > threshold);
}
accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError);
function onSuccess(acceleration) {
var x = acceleration.x;
var y = acceleration.y;
var z = acceleration.z;
var t = false;
if (previous){
if (isShaking(previous, acceleration, 10)){
moveBell(sign(x));
bellsound.play();
accelerated = true;
}
else {
stopBell(acceleration);
if (accelerated == true){
bellend.play();
}
accelerated = false;
}
}
previous = acceleration;
}
</script>
</head>
<body id="onLoad">
<div id="handbell">
<div id="bellcenter" class="position"></div>
<div id="bellright" class="position"></div>
<div id="bellleft" class="position"></div>
<div id="bellrightring" class="ring"></div>
<div id="bellleftring" class="ring"></div>
</div>
</body>
</html>
好吧,首先,您告诉代码在 deviceready 事件触发时运行 onDeviceReady 函数,但我没有在任何地方看到该事件定义。对 PhoneGap 功能(如加速计)的任何使用都必须在设备就绪事件触发后完成。
相关文章:
- 来自文本输入null的html javascript变量
- Html/Javascript-如何屏蔽除英国以外的所有欧盟国家,并允许所有非欧盟国家
- html+javascript:如何在某些条件下禁用dropdownlist中的null选项
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- HTML/Javascript表单会自动重置
- html/javascript中的可拖动文本
- 在HTML/JavaScript中减去两个数字
- 基本的HTML Javascript程序.这是怎么回事
- 一个html/javascript'小工具'知道用户何时单击了小部件外的任意位置
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- 在HTML/Javascript文件中获取App Inventor 2变量值
- HTML/JavaScript表格标题
- 如何修复在浏览器中打开后出现在屏幕上的html/Javascript代码
- 在HTML JavaScript头部分运行Google脚本函数
- 如何在 html/javaScript/Jquery 中“浏览文件夹”
- 带有消息html/javascript的进度条
- 在html/javascript中请求撤消/重做事件
- 使用HTML/Javascript表单使用ActiveXObject创建带有嵌入图像的outlook电子邮件
- 使用html/javascript启动小部件
- 移动html/javascript编程中的变量传递