摇一摇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;
}
}
摇一摇js代码的更多相关文章
- 使用shake.js让你博客支持摇一摇
大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...
- shake.js实现微信摇一摇功能
项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...
- js检测手机摇一摇
1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- 几行代码实现iOS摇一摇功能
实现这个功能很简单,我们直接看代码 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ NSLog(@&quo ...
- js微信摇一摇功能以及api
一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- H5+JS实现手机摇一摇功能
在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...
- js摇一摇事件
今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少. 发现很有意思. 一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...
- js实现手机摇一摇
//手机摇一摇 ---------------------------------------------------------- init();var SHAKE_THRESHOLD = 3000 ...
- 用js实现摇一摇功能
function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...
随机推荐
- 利用chrony和ntp搭建时间同步服务器
利用chrony和ntp搭建时间同步服务器 环境说明 系统版本 CentOS 6.9 x86_64 Network Time Protocol(NTP,网络时间协议)用于同步它所有客户端时钟的服 ...
- /profile文件修改后立即生效
修改profile etc/profile文件是只读的,直接用vi或gedit打开修改后是无法保存的.要修改profile,需要取得root权限,(使用gedit编辑) $sudo gedit /et ...
- java学习笔记——日期处理
获取系统当前时间使用:java.util.Date类,而这个Date的构造方法如下: 无参构造:public Date() 有参构造:public Date(long date) 第一个实例: imp ...
- C# Redis Server分布式缓存编程(一)
这篇文章我将介绍如果用最简洁的方式配置Redis Server, 以及如何使用C#和它交互编程 一. 背景介绍 Redis是最快的key-value分布式缓存之一 缺点: 没有本地数据缓冲, 目前还没 ...
- 微信公众号 - js传入时间戳换算(以前几天、几小时...)
// 获取当前时间戳 function timestamps() { return Math.round(new Date().getTime() / 1000).toString() } // 距离 ...
- 【cocos2d-x 3.x 学习笔记】对象内存管理
内存管理 内存管理一直是一个不易处理的问题.开发人员必须考虑分配回收的方式和时机,针对堆和栈做不同的优化处理,等等.内存管理的核心是动态分配的对象必须保证在使用完成后有效地释放内存,即管理对象的生命周 ...
- px值转rem值的Sublime Text 3自己主动完毕插件
一个CSS的px值转rem值的Sublime Text 3自己主动完毕插件. 插件效果例如以下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入pa ...
- cocos2dx3.0戳青蛙游戏(打地鼠)
1戳青蛙项目描写叙述 1.1功能描写叙述 实现类似打地鼠游戏.青蛙随机出如今屏幕左边5*3的格子中,并会向屏幕右边移动,在青蛙逃离之前,手指点击实现戳灭青蛙的效果.随着分数添加,青蛙越来越多,当青蛙逃 ...
- atitit.基于bat cli的插件管理系统.doc
atitit.基于bat cli的插件管理系统.doc /AtiPlatf/src_atibrow/com/attilax/cmd/CmdX.java pathx.isWebPathMode=true ...
- atititi.soa 微服务 区别 联系 优缺点.doc
atititi.soa 微服务 区别 联系 优缺点.doc 1. 应用微服务的动机,跟传统巨石应用的比较1 2. 面向服务架构(SOA) esb2 3. 微服务架构(Microservices)2 ...