zoukankan      html  css  js  c++  java
  • 手机摇一摇功能

    利用html5实现类似微信的手机摇一摇功能,并播放音乐。

    1、  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

    2、  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

    <!DOCTYPE html>  
      
    <html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
        <title>摇一摇功能</title>  
        <script type="text/javascript">

        

    var SHAKE_THRESHOLD = 3000;
    var last_update = 0;
    var x = y = z = last_x = last_y = last_z = 0;
    function init() {
    if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
    alert('not support mobile event');
    }
    }
    function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();
    if ((curTime - last_update) > 100) {
    var diffTime = curTime - last_update;
    last_update = curTime;
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

    if (speed > SHAKE_THRESHOLD) {
    alert("摇动了");
    media.setAttribute("src", "http://211.148.5.228:8002/Pages/test/Kalimba.mp3");
    media.load();
    media.play();
    }
    last_x = x;
    last_y = y;
    last_z = z;
    }
    }

        </script>  
    </head>  
    <body onload="init()">  
    <p>用力摇一摇你手机</p>  
    <audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://211.148.5.228:8002/Pages/test/Kalimba.mp3" autoplay="false">  
    </audio>  
    </body>  
    </html>  

    可以使用shake.js  地址:https://github.com/alexgibson/shake.js

  • 相关阅读:
    2017ccpc全国邀请赛(湖南湘潭) E. Partial Sum
    Codeforces Round #412 C. Success Rate (rated, Div. 2, base on VK Cup 2017 Round 3)
    2017 中国大学生程序设计竞赛 女生专场 Building Shops (hdu6024)
    51nod 1084 矩阵取数问题 V2
    Power收集
    红色的幻想乡
    Koishi Loves Segments
    Wood Processing
    整数对
    Room and Moor
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/7508704.html
Copyright © 2011-2022 走看看