定番
履歴

JS 加速度検知

JS 加速度検知
スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。

このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。

スマホを上下左右に振ってください

サンプルのスクリプトは以下の通りです。

$(function(){
window.addEventListener("devicemotion", devicemotionHandler);
});

function devicemotionHandler(event) {
  // X軸
  var x = event.acceleration.x;
  // Y軸
  var y = event.acceleration.y;
  // Z軸
  var z = event.acceleration.z;

    var l = 5;
    if (x > l) {
    $('#demo_data').html('右に振りました');
    }
    else if (x < -l) {
    $('#demo_data').html('左に振りました');
    }
    else if (y > l) {
    $('#demo_data').html('上に振りました');
    }
    else if (y < -l) {
    $('#demo_data').html('下に振りました');
    }
    else return;
}

このサンプルはjQueryを組み合わせて実装しています。

2018-06-02 14:45:38
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top