Ориентация устройства Javascript, добавляющая класс в div - PullRequest
Новая
       314

Ориентация устройства Javascript, добавляющая класс в div

0 голосов
/ 05 июля 2019

Мне было поручено разработать мобильную страницу / рекламу, которая обнаружит, что пользователь крутит свое устройство , чтобы стимулировать упражнения и дать им код нединамического купона в конце.В идеале я бы хотел, чтобы пользователь крутил всего ~ 5 секунд, а затем показывал div с кодом купона.Если пользователь останавливается на ... скажем, 2 секунды, я хотел бы показать еще один div, побуждающий его продолжать крутить, чтобы получить свою награду.

Я провел небольшое исследование, и похоже, что «deviceorientation»путь, хотя я не совсем обернулся, чтобы запечатлеть продолжительность этого события.Я также думал о «подделке» продолжительности как о более простом возможном решении, думая, что 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/

Любая помощь будет принята с благодарностью !!

...