Question

我受委托开发了一个移动页面/广告，该页面可以检测用户twisting their device，以鼓励运动并在最后为他们提供非动态优惠券代码。理想情况下，我希望用户扭曲约5秒钟，然后显示带有优惠券代码的div。如果用户停留2秒，我想展示另一个div鼓励他们继续扭曲以获取奖励。

我一直在做一些研究，看起来“设备定位”是可行的方法，尽管我还没有全神贯注于捕获该事件的持续时间。我还考虑过“伪造”持续时间作为一种更容易的解决方案，认为1次扭曲== 1秒。

到目前为止，我已经能够显示设备的设备定向输出，但是却无法绕开扭曲持续时间和显示div的逻辑。

window.onload = function() {

    var o1 = document.getElementById('o1');
    var o2 = document.getElementById('o2');
    var o3 = document.getElementById('o3');

    var initial_position = null;
    var max_rotation = 60;

    if (window.innerWidth < window.innerHeight) screen_portrait = true;

    window.addEventListener('deviceorientation', function(e) {

        if (initial_position === null) initial_position = Math.floor(e.alpha);

        var current_position = initial_position - Math.floor(e.alpha);

        var rotation  = current_position;

        if (rotation > max_rotation) rotation = max_rotation;
        if (rotation < (0-max_rotation)) rotation = 0-max_rotation;


        if (rotation > 0) {
            var state = 'Right twist';
        } else {
            var state = 'Left twist';
        }

        o1.value = state;
        o2.value = current_position;
        o3.value = rotation;

    });
};

https://jsfiddle.net/ajwg5L0f/1/

任何帮助将不胜感激！

Javascript deviceorientation将类添加到div

0 个答案: