使用html5的DeviceOrientationEvent制作指南针

Please open with your mobile, THX!

    
if(window.DeviceOrientationEvent){
    console.log('your browser is pefer to support DeviceOrientationEvent');
    window.addEventListener("deviceorientation", findNorth);
    function getOrientationData(evt){
        return {
            'alphaValue': evt.alpha,
            'betaValue': evt.beta,
            'gammaValue': evt.gamma
        }
    }
    function showInScreen(data){
        document.getElementById('alpha').innerHTML = data.alphaValue;
        document.getElementById('beta').innerHTML = data.betaValue;
        document.getElementById('gamma').innerHTML = data.gammaValue;
        document.getElementById('guide').style.cssText = "transform: rotate("+ data.alphaValue + "deg); " + "-webkit-transform: rotate(" + data.alphaValue + "deg)";
    }
    function findNorth(evt){
        var me = evt;
        showInScreen(getOrientationData(me));
    }
}else{
    document.getElementById('guide').innerHTML = 'you need to update your browser!';
}