HTML5使用DeviceOrientation实现摇一摇功能

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

<script src="/UploadFiles/2021-04-02/shake.js">

首先实例化Shake，然后启动开始监听设备运动情况，监听设备运动，回调监听结果：shakeEventDidOccur。




window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜，摇得"+arr[num]+"！"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 



这里，函数shakeEventDidOccur()可以自定义，本例是将摇晃后的结果返回在页面上展示出来，请看DEMO演示。
以上所述就是本文的全部内容了，希望大家能够喜欢。