手机端 摇一摇功能 代码实现

手机端网页上的摇一摇效果,js代码如下

var speed;
//判断手机是否有摇一摇功能
if (window.DeviceMotionEvent) {     //绑定devicemotion事件
    window.addEventListener(‘devicemotion‘,deviceMotionHandler, false);
}else{
    alert(‘您的设备不支持摇一摇功能,系统将自动为您摇动手机^_^‘);
    speed = 888;    //不支持摇一摇时,修改speed值触发摇动手机事件
}
//初始化
var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {

    var acceleration =eventData.accelerationIncludingGravity;

    var curTime = new Date().getTime();

    if ((curTime - last_update)> 300) {

        var diffTime = curTime -last_update;
        last_update = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;

        speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
        //speed = 888;
        //当速度高于阈值时
        if (speed > SHAKE_THRESHOLD) {
            alert("shaked!");
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}

  

时间: 2024-10-10 20:54:03

手机端 摇一摇功能 代码实现的相关文章

手机端网页返回顶部js代码

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>手机端网页返回顶部js代码</title>  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

简单手机端头部设置 及css代码

<html> <head> <title>今日报表</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </he

移动端,手机端 响应式布局头部代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="a

手机端的视频录制功能实现

移动互联网时代来临,一个崭新的时代开始了.所谓移动互联网就是将移动通信和互联网整合在一起,使移动设备(包括手机和上网本)可以随时随地地访问互联网资源和应用.互联网时代创造了一个经济神话,也造就了很多时代英雄,他们一个个令人仰慕.试想为数亿的手机用户和数亿的网民建立一个共同的平台,使其应用到企业.商业和和农村之间,又会是怎样一个惊天动地的伟业呢?新时代开始了,你愿意输在起跑线上吗?与之Android 相关的应用开发随之而来.先大家阐述一下视频录制详细细节. 如何在自己应用程序中播放一个可用的med

手机端禁止网页页面放大代码

<meta name="viewport" content="height = [pixel_value | device-height],width = [pixel_value | device-width ],initial-scale = float_value,minimum-scale = float_value,maximum-scale = float_value,user-scalable = [yes | no],target-densitydpi

java端判断请求来自pc端还是手机端

记录是为了更好的成长! 在项目中遇到一个问题,需要判断请求是来自pc端还是手机端,如下直接贴代码: /** * 判断请求来自手机端还是电脑端 */ public static boolean isMobileDevice(String requestHeader) { /* * android :所有安卓设备 * mas os :iphone * windows phone :windows系统手机 */ String[] deviceArray = new String[] {"android

Android 微信摇一摇功能实现

开发之前 今天学习了一下传感器, 脑子里就蹦出了微信的摇一摇, 于是鼓了鼓勇气抽空写了出来, 本人菜鸟一枚, 希望大神们多多指点 开发环境 Android Studio 2.2.1 JDK1.7 API 24 Gradle 2.2.1 相关知识点 加速度传感器 补间动画 手机震动 (Vibrator) 较短 声音/音效 的播放 (SoundPool) 开始开发 案例预览 案例分析 我们接下来分析一下这个案例, 当用户晃动手机时, 会触发加速传感器, 此时加速传感器会调用相应接口供我们使用, 此时

Android加速度传感器的使用:摇一摇功能的实现

一.原理介绍: Android手机中摇一摇的功能已经很常见了,最近接触到了这个功能,原理很简单:使用加速度传感器,在晃动手机时,监听加速度在各个方向的变化,当加速度值超过设定的灵敏度时,则触发摇一摇功能. 二.使用到的类: SensorManager SensorEventListener 三.功能实现: 1.摇一摇功能:我将摇一摇功能封装成了一个类ShakeUtils,在使用时按照注释中的说明使用即可,ShakeUtils.java如下(差的包请CTRL+SHIFT+O导入): /** * 摇

Android摇一摇功能的实现

Android利用传感器实现类似摇一摇功能 1.基本原理 摇一摇功能基本原理是利用手机加速度传感器,当加速度到达某个值时,触发某个事件,如UI改变,手机震动,播放声音,获取数据等事件. 2.传感器原理和使用 传感器原理和使用,可以参见上一篇博客,Android中传感器Sensor的使用 3.声音事件 获取对象MediaPlay类  mediaPlayer=MediaPlayer.create(getApplicationContext(), R.raw.music); 事件触发:mediaPla