如何实现“摇一摇”功能
摇一摇需要添加cordova插件:cordova plugin add cordova-plugin-device-motion,获取设备的加速度来实现手机摇动幅度的计算。
框架选择为比较流行的JQuery Mobile
一、html文件代码
<div data-role="content"> //创建一个容器
<div class="house">
<div id="img"></div>
</div>
<h1 id="heci"></h1>
<div class="cen">
<button id="btstart" data-inline="true">开始</button> //创建一个按钮,data-inline让按钮适应其内容
</div>
</div>
二、css文件代码
.house{height:260px;background-image:url("img/ma.png");background-repeat:no-repeat;background-position:center center;}
//添加一张背景图并设置其样式
#img{height:200px;background-image:url("");background-repeat:no-repeat;background-position:center center;opacity:0;}
//设置摇一摇显示的图片样式,初始化为不显示,透明度为0
#heci{text-align:center;color:yellow;font-size: 20px}
//设置文字样式
三、js文件代码
$(document).on("pageshow","#page4",function()
{
console.log("page.ok...");
startWact();
}); //页面加载完成后调用starWact()函数
var wID; //返回的ID值,停止检测加速度的方法需要该ID
var times=0; //准备重新计数
function startWact()
{
console.log("startWact.ok...");
var btstart=document.getElementById("btstart");
init(); //初始化操作
btstart.addEventListener("click",function(){
console.log("btstart.ok...");
var times=0; //准备重新计数
document.getElementById("btstart").style.display="none"; //隐藏按钮
wID=navigator.accelerometer.watchAcceleration(function(acc){
var x=acc.x;var y=acc.y;var z=acc.z;
var avg=(Math.abs(x)+Math.abs(y)+Math.abs(z))/3;
if(avg>=12) //如果在虚拟机上测试,avg需调为4
{
times++;
console.log("avg.ok...");
}
if(times>=3)
{
console.log("times.ok...");
times=0;
stopWatch(); //自定义函数,停止检测加速度
}
},function(){console.log("error...");},{frequency:300});
}); //frequency:300每03秒更新一次加速度信息
}
var pics=["qian.png","che.png","fang.png"]; //图片名称
var txts=["马上有钱!","马上有车!","马上有房!"]; //文字说明
function stopWatch()
{
console.log("stopWatch.ok...");
navigator.accelerometer.clearWatch(wID); //停止监视设备加速度
var rnd=Math.floor(Math.random()*3); //产生随机数,并四舍五入为整数
document.getElementById("img").style.opacity=0; //隐藏图片
opacity=0;
document.getElementById("img").style.backgroundImage="url('img/"+pics[rnd]+"')"; //显示图片
document.getElementById("heci").innerHTML=txts[rnd]; //显示文字信息
//加声音提示 playSound();
change_opacity();
}
var opacity=0;
function init()
{
console.log("init.ok...");
document.getElementById("img").style.opacity=0;//隐藏图片
document.getElementById("heci").innerHTML="摇一摇 看有什么"; //显示文字信息
times=0;
opacity=0;
}
;
//改变透明度
function change_opacity() {
opacity += 0.02;
console.log("change_opacity.ok...");
document.getElementById("img").style.opacity = opacity;
if(opacity < 1) id=setTimeout(change_opacity, 50); //每50毫秒调用一次chang_opacity函数
else{
clearTimeout(id);
console.log("clear.ok...");
document.getElementById("btstart").style.display = "";
} //当opacity为1时,结束setTimeout的调用,显示按钮
}
四、实现在摇一摇时出现震动与蜂鸣声效果
需添加cordova插件:cordova plugin add cordova-plugin-vibration
js文件代码
navigator.notification.beep(3); //参数为整数,如1,2,3...表示蜂鸣(类似按键声音)次数。
navigator.vibrate(1000); //震动1秒
// navigator.vibrate([2000,1000,3000]); //震动时长2、1、3秒共三次