js实现手机摇一摇

//手机摇一摇 ----------------------------------------------------------

init();
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;
            }
        }

时间: 2024-10-10 13:59:57

js实现手机摇一摇的相关文章

js检测手机摇一摇

1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandler(event) { accGravity = event.acceleration; } if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", motionHandler, false); } el

HTML5手机重力与方向感应的应用——摇一摇效果

http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方

通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

HTML5实现手机摇一摇的功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. js如下: <scirpt> var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y =

使用shake.js让你博客支持摇一摇

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入. 添加“摇一摇”事件监听 window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake oc

shake.js实现微信摇一摇功能

项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码: /* * Author: Alex Gibson * https://github.com/alexgibson/shake.js * License: MIT license */ (function(global, factory) { if (typeof define === 'func

手机摇一摇的功能

今天做了一个手机摇一摇的小案例,将网上的小案例修改成自己想要的 在修改代码的过程中遇到了几个小问题,当我摇手机的时候需要对摇到的手机号进行计数,但是敏感度高会出现计数变多 解决的办法是在手机号弹出,点击继续抽奖的时候计数 运用js的时候非常的不熟练,所以需要多练习 手机摇一摇的代码下载链接 http://download.csdn.net/detail/u012192657/9510003 源代码从网上找的,感谢提供源代码的人

html5 DeviceOrientation来实现手机网站上的摇一摇功能

原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容. ——————————————————— 介绍之前做两个声明: 1.以下代码可以直接运行,当然你别忘了引用jQuery才行,我可提醒了,别到时候跑不起来骂我就成: 2.下面的实现思想参照了网上的一些文章,自己做了以下整理,对代码加入了一些注释说明,本人并非原创. 1 <html lang="

HTML5 手机摇一摇实现

目录结构 引入jQuery:jquery-1.11.1.min.js html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t