JavaScript实现“摇一摇”功能Cordova移动应用开发

如何实现“摇一摇”功能

摇一摇需要添加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秒共三次