摇一摇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 ...
随机推荐
- 对中级 Linux 用户非常有用的 20 个命令
FROM:http://www.oschina.net/translate/20-advanced-commands-for-middle-level-linux-users 21. 命令: Find ...
- window命令
查看端口占用命令: 开始--运行--cmd 进入命令提示符 输入netstat -aon 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在 ...
- 2017.7.31 ELK+logback+redis的使用
参考来自:spring mvc+ELK从头开始搭建日志平台 0 前提 ELK安装成功 redis安装成功 使用logback的项目运行成功 1 配置文件 1.1 pom.xml 为了使用logback ...
- 2017.6.27 jdbc基本使用
参考来自:http://www.runoob.com/w3cnote/jdbc-use-guide.html 1.jdbc的执行流程 JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系 ...
- modal html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu 5365 Run(BC 50 B题)(求四边形的个数)
本来准备睡觉.结果还是忍不住想把它A了.由于已经看了题解了, 题意:就是给你一些坐标.都是整数,求一些正多边形的数目,官方题讲解是地球人都知道整数坐标构不成正三角形.正五边形和正六边形的... 然而我 ...
- Linux经常使用命令(八) - touch
linux的touch命令不经常使用, 一般用来改动文件时间戳, 或者新建一个不存在的文件. 1. 命令格式: touch [选项] 文件 2. 命令參数: -a 仅仅更改存取时间. -c ...
- 初探boost之smart_ptr库学习笔记
概述 Boost.smart_ptr库提供了六种智能指针,除了shared_ptr 和 weak_ptr 以外还包含 scoped_ptr .scoped_array . shared_array . ...
- WCF实现上传图片功能
初次学习实现WCF winform程序的通信,主要功能是实现图片的传输. 下面是实现步骤: 第一步: 首先建立一个类库项目TransferPicLib,导入wcf需要的引用System.Service ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...