HTML 5の重要な特性であるDeviceOrientationを利用して、携帯電話のウェブサイト上の揺れ機能を実現する

<script>

// DeviceOrientation                      ，   DOM     。

//           ：

// 1、deviceOrientation：             ，                （       、      ）。

// 2、deviceMotion：           ，                    。

//        ，           、         。



//      Native                 ——    ，     、      、      。。。

//    android  ios                 ，    ，                     。



// OK，         ，  ~

//                 —— DeviceMotionEvent:                 ，                ：

// x：        ；

// y：        ；

// z：      。

//                ，            ：

// 1、accelerationIncludingGravity(       )

// 2、acceleration(          )



//     ，         ，come on，    ！



//                 

function init(){

　　if (window.DeviceMotionEvent) {

　　　　//              

　　　　window.addEventListener('devicemotion', deviceMotionHandler, false);

　　　　$("#yaoyiyaoyes").show();

　　} else{

　　　　//               

　　　　$("#yaoyiyaono").show();

　　} 

}



//   ，                 ？           ：

// 1、                            ；

// 2、           x、y、z                ；

// 3、                   （      ，              ）。

//        ，               ，      ，               ，                     。



//   ，         

var SHAKE_THRESHOLD = 3000;

//                

var last_update = 0;

//      x、y、z                  

var x;

var y;

var z;

var last_x;

var last_y;

var last_z;



//                 ，       

var count = 0;



function deviceMotionHandler(eventData) {

　　//          

　　var acceleration = eventData.accelerationIncludingGravity; 



　　//       

　　var curTime = new Date().getTime(); 

　　var diffTime = curTime -last_update;

　　//      

　　if (diffTime > 100) {

　　　　last_update = curTime; 



　　　　x = acceleration.x; 

　　　　y = acceleration.y; 

　　　　z = acceleration.z; 



　　　　var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; 



　　　　if (speed > SHAKE_THRESHOLD) { 

　　　　　　// TODO:                       

　　　　　　count++;

　　　　　　$("#yaoyiyaoyes").hide();

　　　　　　$("#yaoyiyaoresult").show();

　　　　　　$("#yaoyiyaoresult").html("   ! " + count + "  ！");

　　　　}



　　　　last_x = x; 

　　　　last_y = y; 

　　　　last_z = z; 

　　} 

} 

</script>

<div id="yaoyiyaono" style="font-size:20px;margin:10px;line-height:35px;display:none;">

　　  ，       ，         ，          ，  ：</br>

　　1、     PC     ，      ，        ；</br>

　　2、    Android  ，        ，android          ，    UCWeb、chrome       ；</br>

　　3、             ，       ：      ！！！</br>

</div>

<div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;">

　　  ，    ，               !

</div>

<div id="yaoyiyaoresult" style="font-size:20px;margin:10px;line-height:50px;display:none;"></div>

<script>

$(document).ready(function(){

init();

});

</script>